vue cli 3.X (三) 工程文件配置vue.config.js

朱雀 2021-09-29 16:14 176阅读 0赞

## 一、说明 ##

vue.config.js是一个可选的配置文件，该文件必须放在根目录下，必须叫这个名字，必须按照固定的模式且严格遵守JSON的规范。

只有这样才能被@vue/cli-service自动加载，修改整个工程的配置

详细参考：官网 [https://cli.vuejs.org/zh/config/\#全局-cli-配置][https_cli.vuejs.org_zh_config_-cli-]

## 二、格式 ##

// vue.config.js
    module.exports = {
     　 配置项1;'',//string类型的值
    　　配置项目2：true， //boolean类型的值
    　　配置项目3：{
    　　},//object类型的值
    ...
    };

## 三、常见配置项目和配置的值 ##

1、baseUrl：部署应用时候的根路径，也可以使用相对路径（存在使用限制），这个vue cli 3.3以后就取消了，被publicPath取代了

类型：string

默认值：’/’

2、publicPath：打包部署应用程序时候的URL

类型：string

默认值：’/’ //绝对路径，部署在根目录下

说明：

①：默认值是部署在根目录下；根目录下的子文件夹：’/myapp/’

②：相对路径：’./’,尽快避免使用相对路径

③：可利用环境变量，设置不同开发环境用不同的值:

![在这里插入图片描述][20190716111812611.png]

环境变量设置，见vue vli 3.x（二），这个设置就是打包环境存在前面那个子文件夹下，否则放在根目录下

3、outputDir

作用：当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除

类型：string

默认值：‘dist’

4、assetsDir

作用：放置生成的静态资源js，css、image。fonts等,其路径相对于outputDir设置的路径，就是放在output路径下面

类型：string

默认值：’’

习惯设置：‘assets’

5、indexPath

作用：指定生成的index.html的输出路径，相对于outputDir的设置

类型：string

默认值：‘index.html’

6、filenameHashing

作用：默认情况下，生成的静态资源在他们的文件名中包含了hash，以方便控制缓存

类型：boolean

默认值：true

7、pages

作用：在多页面模式下构建应用，每个page应该对于一个js入口文件

类型：object

默认值：undefined

样式：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]

8、

[https_cli.vuejs.org_zh_config_-cli-]: https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
[20190716111812611.png]: /images/20210724/b288967c575d4f119be8d961b7d09a1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/37d6a611a747402eb4ce30825b4cd2a8.png