vue-cli-service build 如何环境设置,打出不同环境的包
使用 vue-cli-service 打包项目,通过配置不同的指令,给项目设置不同的配置,达到使用指令打出不一样的包,避免来回切换环境配置信息。运行 npm run serve 时,会把 process.env.NODE_ENV 设置为 'development';运行 npm run build 时,会把 process.env.NODE_ENV 设置为 'production';"script
使用 vue-cli-service 打包项目,通过配置不同的指令,给项目设置不同的配置,达到使用指令打出不一样的包,避免来回切换环境配置信息。
运行 npm run serve 时,会把 process.env.NODE_ENV 设置为 'development';
运行 npm run build 时,会把 process.env.NODE_ENV 设置为 'production';
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
},
如果只是区分线上环境还是本地环境的配置,使用 process.env.NODE_ENV 就可以区分出来,但是如果将打包的项目,需要区分测试环境和生产环境时,我们又该如何区分呢?
在 Vue CLI 官网中,vue-cli-service serve 中可以配置选项 --mode 来指定环境模式,默认为 development。vue-cli-service build 中可以配置选项 --mode 来指定环境模式,默认为 production。
vue-cli-service build
会在 dist/
目录产生一个可用于生产环境的包,带有 JS/CSS/HTML 的压缩,和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里,那么我们可以给 build 下添加选项 --mode 来区分测试环境和生产环境。
更多参数配置,请查看 Vue cli 服务。
在 package.json 文件中,添加测试环境和生产环境的打包指令:
"scripts": {
"build-test": "vue-cli-service build --mode test",
"build-prod": "vue-cli-service build --mode prod",
},
那如何通过指令来配置环境变量呢?
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入,但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
注意:环境文件只包含环境变量的“键=值”对。
环境加载属性:为一个特定模式准备的环境文件 (例如 .env.production
) 将会比一般的环境文件 (例如 .env
) 拥有更高的优先级。
此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 .env
文件覆写,因此通过为 .env
文件增加后缀来设置某个模式下特有的环境变量。
在项目根目录下添加两个文件 .env.test 和 .env.prod,配置如下:
// .env.test
NODE_ENV = 'production'
VUE_APP_WEBSOCKET_URL = 'wss://172.16.105.53:8080/'
// .env.prod
NODE_ENV = 'production'
VUE_APP_WEBSOCKET_URL = 'wss://xcx.upal.cn/'
这里需要注意的是:只有以 VUE_APP_
开头的变量会被 webpack.DefinePlugin
静态嵌入到客户端侧的包中。
除了 VUE_APP_*
变量之外,在你的应用代码中始终可用的还有两个特殊的变量:
NODE_ENV
- 会是"development"
、"production"
或"test"
中的一个。具体的值取决于应用运行的模式。BASE_URL
- 会和vue.config.js
中的publicPath
选项相符,即你的应用会部署到的基础路径。
更多信息,请查看 环境变量与模式的配置 。
如何在项目中使用呢?
const baseurl = process.env.VUE_APP_WEBSOCKET_URL || 'ws://172.16.105.53:8080/'
然后使用不同的指令就可以生产不同的包了。
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)