Vue 项目判断开发、测试、正式环境
Vue Cli构建的项目只有npm run dev和npm run build两条开发和编译的命令。而要添加测试环境,我们可以扩展一条npm run test的命令输出测试环境下执行的代码。1.在build文件夹中创建test.js文件test.js中的代码很简单,就两行。主要就是配置一个环境变量用以区别测试和正式环境。这里没有直接修改原有的process.env.NODE_ENV是担心会...
·
方法一
最简单的方法:通过判断location.href来判断环境
function env() {
if (process.env.NODE_ENV === "development") return "development"; //开发环境
if (window.location.href.includes('192.168')) return 'test'; //测试环境,"192.168"根据实际情况而定
return 'production' //线上环境
}
方法二
适用于Vue Cli 2.x构建的项目
Vue Cli 2.x构建的项目只有npm run dev和npm run build两条开发和编译的命令。而要添加测试环境,我们可以扩展一条npm run test的命令输出测试环境下执行的代码。
1.在build文件夹中创建test.js文件
test.js中的代码很简单,就两行。主要就是配置一个环境变量用以区别测试和正式环境。这里没有直接修改原有的process.env.NODE_ENV是担心会影响到原本的逻辑。
注意:type的值必须单双引号两层嵌套,不能直接为’test’,否则会报错,具体代码如下:
// 配置环境变量 type 为 test
process.env.type = '"test"'
// 引入build.js文件,执行原先的编译代码
require('./build')
2.修改config文件夹中的prod.env.js文件
配置好后就可以在项目代码中调用process.env.type了,代码如下:
module.exports = {
NODE_ENV: '"production"',
// 将上文设置的环境变量,赋值到 type 属性上
type: process.env.type
}
3.在package.json文件中添加npm run test命令
添加一条命令,执行我们上文创建的test.js文件
"scripts": {
"dev": "node build/dev-server.js",
"test": "node build/test.js",
"build": "node build/build.js"
},
4.在项目代码中判断环境
按照上述的步骤做完后,就可以在项目代码中写判断了
let baseURL
// 开发环境
if (process.env.NODE_ENV === 'development') {
baseURL = 'http://192.168.1.110:8080/'
// 编译环境
} else {
// 测试环境
if (process.env.type === 'test') {
baseURL = 'http://test.xxx.com/'
// 正式环境
} else {
baseURL = 'http://app.xxx.com/'
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)