vue-cli3配置文件 vue-cli3配置文件

一、vue.config.js文件配置

在项目根目录下自己手动新建vue.config.js文件，会被@vue/cli-service自动加载。
参考的官方文档

1、配合webpack的配置

【vue-cli3配置文件】简单配置
调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象。该对象将会被webpack-merge合并如最终的webpack配置。
在configureWebpack里可以配置webpack的loader和plugins等

//vue.config.js module.exports = { //1.简单配置 configureWebpack : { plugins: [ new MyAwesomeWebpackPlugin(), ] }//2.链式操作：允许对内部的webpack配置进行更细粒度的修改 chainWebpack : config => {}//3.webpack的css的一些loader css : { module : false, extract : false , sourceMap : false, loaderOptions: { //向css相关的loader传递选项， //支持的loader:css-loader,postcss-loader,sass-loader,less-loader,stylus-loader css : { //这里的选项会传递给 css-loader }, postcss : { //这里的选项会传递给 postcss-loader } }, }//4.所有webpack的devServer的选项都支持 devServer : { proxy : { '/api' : { target : 'http://localhost:4000', ws : true, changeOrigin : true, } } } }

2.完整配置文件

下方配置项的值都是默认值

//vue.config.js module.exports = { //1.从vue cli3.3开始已弃用，请使用publicPath baseUrl : '/',/* 2.1部署应用包时的基本URL。用法和webpack本身的output.publicPath一致。但在cli的其它地方也会用到这个值，所以请不要直接修改webpack的output.publicPath。 2.2默认情况下,Vue Cli会假设你的应用是被部署在一个域名的根路径。如我本地的应用的路径是“D:\WORK\study\vue\vue_cli3_test\demo1”，则在这个应用中，根路径就是“D:\WORK\study\vue\vue_cli3_test\demo1” */ publicPath : '/',//3.当运行vue-cli-service build时生成的生产环境构建环境的目录。用法和webpack的output.path一样，不要修改output.path outputDir :'dist',//4.放置打包后生成的静态资源（js、css、img、fonts）的目录，该目录相对于outputDir。 assetsDir:' ',//5.指定生成的index.html的输出路径，相对于outputDir。也可以是一个绝对路径。 indexPath : 'index.html',//6. filenameHashing : true,//7.多页应用模式下构建应用 pages : undefined,//8.安装@vue/cli-plugin-eslint后生效。为true时将检查错误输出为编译警告输出到命令行，编译不会失败。 //为"error"时，将检查错误直接显示在浏览器中。强制eslint-loader将lint错误输出为编译错误，编译会失败。 lintOnSave : true,//9. tuntimeCompiler : false, //10. transpileDependencies : [], //11.如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建 productionSourceMap : true, //12. crossorigin : undefined, //13. integrity : false, //14. parallel : require('os').cpus().length > 1 , //15.向PWA插件传递选项 pwa : {} //16.不进行任何schema验证的对象，可以用来传递任何第三方插件选项，不是webpack的plugins pluginOptions : {},//17.和wenpack相关的配置参考最上面代码 }

1.eslint是用于检查我们写的javascript代码是否满足指定规则的静态代码检查工具，是使用nodejs写的。
2.webpack的Source Map 使用

二、环境变量与模式参考文档
1.为什么需要自定义配置环境变量和模式？一个项目前端开发过程中，一般会经历本地开发，测试脚本， 开发自测 ，测试环境 ，预上线环境 才能正式发布。对应每个环境都可能有所差异，如服务器地址，后台接口地址等。所以在环境切换时，就需要不同的配置参数，这时候就可以使用环境变量和模式，来方便我们管理。
2.vue-cli3总共提供了四中方式来指定环境变量： 1.在根目录添加.env文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。
2.在根目录添加.env.local文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。
3.在根目录添加.env.[mode]文件，配置对应某个模式下的配置,比如：.env.development来配置开发环境的配置。
4.在根目录添加.env.[mode].local文件，配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效，该文件不会被git跟踪。
3.模式

在运行命令时为NODE_ENV赋值，去设置此时运行的应用的环境模式。每个模式都会将NODE_ENV的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 "development"

默认情况下Vue Cli项目有三种模式，

development：在vue-cli-service serve下，即开发环境使用
production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式环境使用
test：在vue-cli-service test:unit下使用

在package.json文件中：

{ "scripts": { "serve": "vue-cli-service serve",// vue-cli-service serve --mode development，不带mode参时默认是开发环境 "build": "vue-cli-service build",// vue-cli-service build --mode production，不带mode参时默认是生产环境 "lint": "vue-cli-service lint",//自己新建一个模式：需要在项目根目录新建.env.stage1文件，在.env.stage1文件里声明变量 //会在 stage1 模式下加载可能存在的 .env、.env.stage1 和 .env.stage1.local 文件然后构建出生产环境应用。 "stage1" :"vue-cli-service serve --mode stage1" }, }

环境加载优先级
为一个特定模式准备的环境文件将会比一般的环境文件拥有更改的优先级。
同一个key: .env.[mode].local > .env.[mode] > .env

4.环境变量

在.env文件中，只有以VUE_APP_开头的变量会被webpack.DefinePlugin静态嵌入到客户端侧的包中。环境变量必须以VUE_APP_开头。

//.env文件 VUE_APP_SECRET = secret//js文件访问 console.log(process.env.VUE_APP_SECRET)

5.示例

1.设置环境变量

.env文件：VUE_APP_NAME = commom
.env.development文件：VUE_APP_NAME = com_development
.env.production文件：VUE_APP_NAME = com_production
.env.development.local文件：VUE_APP_NAME = com_development_local

2.package.json文件

{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "stage1" :"vue-cli-service serve --mode stage1" }, }

3.在项目main.js里输出console.log(process.env.VUE_APP_NAME)

4.运行应用

1.使用命令：npm run serve
该命令默认develpoment模式，会加载可能存在的.env,.env.development,.env.development.local文件。
输出com_development_local
2.使用命令：npm run build
该命令默认production模式，会加载可能存在的.env,.env.production,.env.production.local文件。
输出com_production
3..使用命令：npm run stage1
该命令默认production模式，会加载可能存在的.env,.env.stage1,.env.stage1.local文件。
输出common
未完待续......