Vue-cli3 环境变量和模式
前段时间工作中用Vue-CLI3构建的Vue工程一些静态资源,比如静态H5页面、图片、图标等等,我们一般放在固定的一些服务器上,链接前缀一般相对固定,但我们打包发布一般要区分测试环境和生产环境,此时的静态资源路径也需要区分测试和生产,如果每次打包都要根据部署的环境去修改路径十分麻烦,这时候vue-cli的模式和环境变量则能够很好地解决这个麻烦。模式模式是Vue CLI项目中一个重要的概念。默认..
前段时间工作中用Vue-CLI3构建的Vue工程一些静态资源,比如静态H5页面、图片、图标等等,我们一般放在固定的一些服务器上,链接前缀一般相对固定,但我们打包发布一般要区分测试环境和生产环境,此时的静态资源路径也需要区分测试和生产,如果每次打包都要根据部署的环境去修改路径十分麻烦,这时候vue-cli的模式和环境变量则能够很好地解决这个麻烦。
模式
模式是Vue CLI项目中一个重要的概念。默认情况下,一个Vue CLI项目有三个模式:
-
development 模式用于vue-cli-service serve
-
production 模式用于vue-cli-service build和vue-cli-service test:e2e
-
test 模式用于vue-cli-service test:unit
模式不同于NODE_ENV,一个模式可以包含多个环境变量。每个模式都会将NODE_ENV的值设置为模式的名称,比如:development模式下NODE_ENV的值会被设置为development
当然,我们也可以通过为.env文件增加后缀来设置某个模式下特有的环境变量。
示例:test模式
我们在项目根目录下创建一个名为.env.test和.env的文件
// .env文件:
VUE_APP_TITLE=VUE-CLI3-DEMO
// .env.test文件
NODE_ENV=production
VUE_APP_TITLE=VUE-CLI3-DEMO(test)
-
vue-cli-service build 会加载可能存在的 .env、.env.production 和 .env.production.local 文件然后构建出生产环境应用;
-
vue-cli-service build --mode test 会在 staging 模式下加载可能存在的 .env、.env.test 和 .env.test.local 文件然后构建出生产环境应用。
这两种情况下,根据 NODE_ENV,构建出的应用都是生产环境应用,但是在 test 版本中,process.env.VUE_APP_TITLE 被覆写成了另一个值。
我们在vue.config.js文件中添加console.log(process.env.VUE_APP_TITLE)
在package.json文件中添加"build-test": “vue-cli-service build --mode test”
执行npm run build和npm run build-test
通过查看控制台打印出的分别是VUE-CLI3-DEMO和VUE-CLI3-DEMO(test),由此可见不同模式下的环境变量不同。
环境变量
只有以**VUE_APP_**开头的变量才会被webpack.DefinePlugin静态嵌入到客户端侧的包中,我们可以在代码中以下面的方式访问:process.env.VUE_APP_TITLE
除了VUE_APP_*变量外,还有两个始终可用的特殊变量:
- NODE_ENV 值为development、productin、test中的一个。
- BASE_URL 与vue.config.js中的publicPath相符,即应用部署的基础路径
回到我们最开始的关于静态资源在不同环境下的路径问题,我们可以分别创建.env.test和.env.production两个文件,在文件中添加变量VUE_APP_STATIC_BASE_URL,根据不同环境赋予不同的值,在代码中用到静态资源的时候通过process.env.VUE_APP_STATIC_BASE_URL + 静态资源后续具体路径,再package.json中添加相应的模式打包命令,这样就可以比较好解决我们最开始提出的问题了。
欢迎关注作者的个人博客和微信公众号
个人博客:代码视界
微信公众号:代码视界
更多推荐
所有评论(0)