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

一、说明

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

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

详细参考:官网 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/’

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

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

在这里插入图片描述

环境变量设置,见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

样式:

在这里插入图片描述

8、

Logo

前往低代码交流专区

更多推荐