只需五步配置完成
本地项目启动命令使用:npm run dev,npm run dev_test、npm run dev_prod
打包环境命令使用:npm run build,npm run build test、npm run build prod
配置分‘本地运行’ 和 ‘打包运行’ 两个文件:我们先看本地运行配置命令到指定的环境下
本地运行
config/dev.env.js 文件在本地运行时 读取的
打包运行
config/prod.env.js文件在执行打包命令时 读取的
注意:下面使用到的process 对象是一个全局变量,它提供当前 Node.js 进程的有关信息,以及控制当前 Node.js 进程
1.找到config/dev.env.js 修改如下
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') const URL = require('../src/utils/baseURL.js') let params = process.argv[4] let baseUrl = '' let environment = null switch (params) { // 本地环境 case '--config': environment = "'本地环境'" baseUrl = `"${URL.local}"` break // 开发环境 case '--env=test': environment = "'开发环境'" baseUrl = `"${URL.development}"` break // 生产开发 case '--env=prod': environment = "'生产环境'" baseUrl = `"${URL.baseURL}"` break // 其他 default: environment = "'其他'" baseUrl = `"${URL.otherUrl}"` } module.exports = merge(prodEnv, { NODE_ENV: '"development"', baseUrl: baseUrl, environment: environment })
2.找到config/prod.env.js修改如下
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') const URL = require('../src/utils/baseURL.js') let params = process.argv[2] let baseUrl = '' let environment = null switch (params) { case '--inline': environment = "'本地环境'" baseUrl = `"${URL.local}"` break case 'test': environment = "'开发环境'" baseUrl = `"${URL.development}"` break case 'prod': environment = "'生产环境'" baseUrl = `"${URL.baseURL}"` break default: environment = "'其他'" baseUrl = `"${URL.otherUrl}"` } module.exports = merge(prodEnv, { NODE_ENV: '"production"', baseUrl: baseUrl, environment: environment })
3.main.js获取环境并且 注册挂载vue原型上
// 注册全局域名接口调用 Vue.prototype.$baseUrl = process.env.baseUrl // 注册当前运行或者打包的是什么环境下的 Vue.prototype.$Environment = process.env.environment
4.创建文件src/utils/baseURL.js(注意这里要改成你接口请求的对应的ip或者域名地址)
module.exports={ local:'我是本地环境',//本地环境(一般是连接后端主机ip进行本地调试) development:'我是开发环境',// 开发环境(一般是连接测试服务器ip地址) baseURL:"我是生产环境",//生产环境(一般是线上正式发版的ip地址) otherUrl:'我是其他环境' // 其他环境(其他请求ip地址) }
5.找到 package.json scripts属性对象修改下面这样
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev_test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js", "dev_prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" },
提示:第4步要改成你对应的服务器请求ip或者域名地址
完成以上
本地项目启动命令使用:npm run dev,npm run dev_test、npm run dev_prod
打包环境命令使用:npm run build,npm run build test、npm run build prod
提示:process.env.baseUrl和process.env.environment变量可以在任意页面和组件中使用和访问
console.log( process.env.environment) // 获取当前是什么开发环境
我是马丁的车夫,欢迎转发收藏!