vue-cli3.0 多环境打包配置
最近在用3.0的脚手架配Ts的项目,频繁的打包发布,用到了多环境打包问题首先在项目中创建三个文件我这里只用到了本地开发,测试,生产 三个环境配置文件.env.env.development.env.production没有这三个文件的自己创建就可以看看每个env文件中写的东西.env本地环境NODE_ENV = 'local'VUE_AP...
·
最近在用3.0的脚手架配Ts的项目,频繁的打包发布,用到了多环境打包问题
首先在项目中创建三个文件
我这里只用到了
- 本地开发,
- 测试,
- 生产 三个环境
配置文件
-
.env
-
.env.development
-
.env.production
没有这三个文件的自己创建就可以
看看每个env文件中写的东西 -
.env 本地环境
NODE_ENV = 'local'
VUE_APP_CURENV = 'local'
- .env.development 测试环境
NODE_ENV = 'development'
VUE_APP_CURENV = 'development'
- .env.production 生产环境
NODE_ENV = 'production'
VUE_APP_CURENV = 'production'
我们在上方的env里写的代码是干嘛用的呢,
我们使用 process.env.VUE_APP_CURENV 可以获取VUE_APP_CURENV = 'production’的值,用来定义我们不同环境的接口
在我封装的aixos 中,我用了最简单的一种
var baseUrl = "";
switch (process.env.VUE_APP_CURENV) {
case "local":
baseUrl = "http://app-t.xxxxxxxxx80"; //开发
break;
case "development":
baseUrl = "https://app-t.xxxxxxxxx.com"; //测试
break;
case "production":
baseUrl = "https://app-t.xxxxxxxxx.com"; //生产环境url
break;
}
const httpServer = (opts: any) => {
const httpDefaultOpts = { // http默认配置
method: opts.method,
baseURL: baseUrl,
url: opts.url,
timeout: 100000,
params: opts.params,
data: opts.params,
headers: opts.method == 'get' ? {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'Content-Type': 'application/json; charset=UTF-8',
'systoken': '',
} : {
'Content-Type': 'application/json;charset=UTF-8',
'systoken': '',
},
};
使用方法
在vue-cli3.0配置的package.json 文件中,我们有这几个指令
"scripts": {
"serve": "vue-cli-service serve", // npm run serve 启动项目
"build": "vue-cli-service build --mode local", // npm run build 打包本地环境
"pro-build": "vue-cli-service build --mode production", // npm run pro-build 打包生产环境
"dev-build": "vue-cli-service build --mode development", // npm run dev-build 打包测试环境
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
你在指令中 使用
- npm run build
- npm run dev-build
- npm run pro-build
像build dev-build pro-build 可以改成常用的命名
就先写到这。。。。
更多推荐
已为社区贡献8条内容
所有评论(0)