Vue项目判断开发、测试、正式环境的方法

本篇内容主要讲解“Vue项目判断开发、测试、正式环境的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue项目判断开发、测试、正式环境的方法”吧!

方法一

最简单的方法：通过判断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 为 testprocess.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/'    }}

到此，相信大家对“Vue项目判断开发、测试、正式环境的方法”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！