vue配置打包生产测试不同命令
9374 2022/9/16 build
vue 根据打包命令不同 配置不同参数 打测试/生产包
# 创建配置文件
可以配置生产测试 不同的接口前缀,不同的图片参数 在项目根目录下创建文件(src外面 与vue.config同级)
# 生产配置
创建.env.production文件
NODE_ENV = production
# //自定义变量 必须要以VUE_APP_开头定义
VUE_APP_URL = ''
1
2
3
2
3
# 测试配置
创建.env.development文件
NODE_ENV = development
# //自定义变量 必须要以VUE_APP_开头定义
VUE_APP_URL = ''
1
2
3
2
3
# 使用配置文件
直接封装axios中 或者其他js中引入
//根据配置自己取 在main.js或者其他vue文件中直接获取
let { VUE_APP_URL } = process.env;
export const baseurl = {
baseurl:VUE_APP_URL
}
1
2
3
4
5
2
3
4
5
http.js
import axios from 'axios';
import { baseurl } from './url';
export const GET = (url, params = {}, ishowload = true, responseType) => {
return new Promise((resolve, reject) => {
axios
.get(`${base}${url}`, {
params: params,
responseType
})
.then((response) => {
resolve(response);
})
.catch((err) => {
reject(err);
});
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
main.js
import { baseurl } from './utils/url';
1
# 修改打包命令
在根目录下 修改
package.json
{
"scripts": {
"serve": "vue-cli-service serve",
"build-dev": "vue-cli-service build --mode development",
"build-pro": "vue-cli-service build --mode production",
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 打包测试
在终端中执行
#打测试包
npm run build-dev
1
2
2
#打生产包
npm run build-pro
1
2
2