config.js

在Vue CLI项目中，config.js（通常指的是vue.config.js）是一个可选的配置文件，用于对项目进行各种高级配置，以下是关于config.js的详细解释：

基本介绍

文件位置：vue.config.js文件位于项目的根目录中，与package.json同级。

加载方式：如果项目中存在该文件，它会被@vue/cli-service自动加载，无需手动引入或配置。

作用：允许开发者对Vue CLI项目的构建过程进行自定义配置，包括但不限于修改Webpack的配置、设置代理、配置打包路径等。

常见配置项及其用途

1、publicPath：

用途：配置应用的基础路径，这通常用于部署到非根目录的服务器上。

示例：

     module.exports = {
       publicPath: '/my-app/'
     }

2、outputDir：

用途：指定生成的静态文件目录，默认情况下，构建的文件会输出到dist目录。

示例：

     module.exports = {
       outputDir: 'build'
     }

3、devServer：

用途：配置开发服务器行为，如代理设置、端口号等。

示例：

     module.exports = {
       devServer: {
         proxy: 'http://localhost:4000',
         port: 8080,
         open: true
       }
     }

4、configureWebpack：

用途：直接修改Webpack配置，可以是一个对象或函数形式。

示例：

     module.exports = {
       configureWebpack: {
         resolve: {
           alias: {
             '@': path.resolve(__dirname, 'src')
           }
         }
       }
     }

5、chainWebpack：

用途：通过链式操作更细粒度地修改Webpack配置。

示例：

     module.exports = {
       chainWebpack: config => {
         config.module
           .rule('vue')
           .use('vue-loader')
           .tap(options => {
             options.transformAssetUrls = {
               img: 'src',
               image: 'xlink:href'
             };
             return options;
           });
       }
     }

6、lintOnSave：

用途：配置是否在保存时进行代码检查。

示例：

     module.exports = {
       lintOnSave: false
     }

7、transpileDependencies：

用途：指定哪些依赖包需要经过Babel转译，常用于支持ES6+的库。

示例：

     module.exports = {
       transpileDependencies: [
         'vuetify',
         'some-other-lib'
       ]
     }

8、productionSourceMap：

用途：配置生产环境下是否生成source map。

示例：

     module.exports = {
       productionSourceMap: false
     }

FAQs（常见问题及解答）

1、Q:vue.config.js是什么？

A:vue.config.js是Vue CLI项目的配置文件，用于对项目进行各种高级配置，如修改Webpack配置、设置代理、配置打包路径等，它允许开发者更好地管理和控制项目的构建和部署过程。

2、Q: 如何在Vue项目中使用vue.config.js文件？

A: 在Vue项目根目录下创建一个名为vue.config.js的文件，并在其中编写相应的配置，该文件会被Vue CLI自动加载，无需手动引入或配置，在vue.config.js中，可以通过module.exports导出一个配置对象，该对象包含了各种可配置的选项。