config.js什么用

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

基本介绍

位置：vue.config.js文件位于Vue CLI项目的根目录下。

加载方式：该文件会被@vue/cli-service自动加载，无需手动引入或配置。

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

常见配置项及其用途

1、publicPath：

用途：配置应用的基础路径，即部署应用包时的基本URL。

示例：如果应用被部署在https://12345/hjm/，则可以设置为publicPath: '/hjm/'。

2、outputDir：

用途：指定生成的静态文件目录，即打包输出的目录。

示例：默认值为dist，如果希望修改该目录，可以设置为outputDir: 'build'。

3、devServer：

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

示例：可以设置代理来避免跨域问题，如devServer: { proxy: 'http://localhost:4000' }。

4、configureWebpack：

用途：直接修改Webpack配置。

示例：可以添加插件或更改加载器，如configureWebpack: { plugins: [new MyCustomPlugin()] }。

5、chainWebpack：

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

示例：可以修改vue-loader的配置，如chainWebpack: config => { config.module.rule('vue').use('vue-loader').tap(options => { options.transformAssetUrls = { img: 'src', image: 'xlink:href' }; return options; }) }。

6、lintOnSave：

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

示例：默认情况下Vue CLI会在每次保存时对代码进行lint校验，可以通过设置lintOnSave: false来禁用此功能。

7、transpileDependencies：

用途：指定哪些依赖包需要经过Babel转译。

示例：常用于支持ES6+的库，如transpileDependencies: ['vuetify', 'some-other-lib']。

使用建议

多利用路径别名：通过配置路径别名，可以简化模块导入路径，提高代码可读性。

合理配置代理：解决开发环境中的跨域问题，模拟生产环境的接口调用。

定期检查配置：确保配置文件符合当前项目需求，移除不必要的配置项。

FAQs

1、Q:vue.config.js文件是必需的吗？

A: 不是必需的，如果没有特殊需求，可以不创建该文件，如果需要进行自定义配置，那么这个文件是非常有用的。

2、Q: 如何在vue.config.js中配置多页面应用？

A: 可以通过配置pages选项来实现多页面应用。

   module.exports = {
     pages: {
       index: {
         entry: 'src/main.js',
         template: 'public/index.html',
         filename: 'index.html',
       },
       demo: {
         entry: 'src/pages/demo/main.js',
         template: 'public/demo.html',
         filename: 'demo.html',
       },
     },
   }