vue如何使用process.env搭建自定义运行环境
作者:aら 淼
这篇文章主要介绍了vue如何使用process.env搭建自定义运行环境,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
一、vue-cli项目下默认有三种模式
development
:在 vue-cli-service serve 时使用。production
:在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。test
:在 vue-cli-service test:unit 时使用。
对应的 process.env.NODE_ENV 值分别为 development、production、test。
二、可以通过环境文件来指定默认环境变量和自定义环境变量
环境文件有一下几个类型:
.env
: 在所有的环境中被载入.env.local
: 在所有的环境中被载入,但会被 git 忽略.env.[mode]
: 只在指定的模式中被载入.env.[mode].local
: 只在指定的模式中被载入,但会被 git 忽略
mode是某个模块名,如 在src创建 .env.friend 文件,内容:
NODE_ENV=development // 这里可以指定默认的环境是 development、production、test。 VUE_APP_ENV=friend // 自定义的friend环境
注意自定义的变量名必须以 VUE_APP_ 开头才能被webpack.DefinePlugin 静态嵌入,通过process.env.VUE_APP_xxx 来访问;执行此文件就相当于“进入”friend环境了。
三、执行自定义环境文件,进入自定义环境
在package.json中添加
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", "lint": "vue-cli-service lint", "serve:f":"vue-cli-service serve --mode friend", },
执行 npm run serve:f,此时process.env.NODE_ENV为development, process.env.VUE_APP_ENV为friend,利用process.env.VUE_APP_ENV定义ip等信息即可,即可访问后台朋友的接口了。
四、配置举例和应用场景 vue-cli3
public/config/build.js,这里未使用自定义环境(未用process.env.VUE_APP_ENV)
let root = process.env.NODE_ENV; let build = { development: { //开发人员本地调试开发环境 publicPath:"/", outputDir:"xuzhou_shuiwu_web", }, production: { publicPath:"./", outputDir:"xuzhou_shuiwu_web", }, test: { }, // 公网环境 pro: { }, }; // export default build[root]; module.exports = build[root]
public/config/ip.js
// let root = process.env.NODE_ENV; let root = process.env.VUE_APP_ENV; // 自定义 let key = "/back";// 代理关键字 // 通用配置 let common = { key: key, host: "0.0.0.0", port: "8888", localhost: "0.0.0.0:8888", upload: key + "/file/uploadFile", // 文件上传地址 } let ipConfig = { // 默认环境 development: { serverIP: "http://1.1.1.1:8883/portal/", logoutIp: "http://1.1.1.1:8883/portal/cas/logout/", }, // 正式环境 production: { serverIP: "http://1.1.1.1:8082/portal/", logoutIp: "http://1.1.1.1:8082/portal/cas/logout/", }, // 测试环境 test: { }, // 自定义环境 friend: { serverIP: "http://1.1.1.1:8881/portal/", logoutIp: "http://1.1.1.1:8881/portal/cas/logout/", }, }; // export default Object.assign(common,ipConfig[root]); console.log("当前环境:",root) module.exports = Object.assign(common,ipConfig[root])
public/config/index.js
// import ip from "./ip" // import build from "./build" const config = { ip: require("./ip"), build: require("./build") }; // export default config; module.exports = config
vue.config.js
const config = require('./public/config'); const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { // publicPath: "./", //打包后的位置(如果不设置这个静态资源会报404) ./ // vue-cli 3 已废弃baseUrl publicPath: config.build.publicPath, outputDir: config.build.outputDir, //打包后的目录名称 assetsDir: "static", //静态资源目录名称 devServer: { open: true, // disableHostCheck: false, host: config.ip.host, port: config.ip.port, // https: false, // hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy proxy: { [config.ip.key]: { target: config.ip.serverIP, // jenkins changeOrigin: true, pathRewrite: { ["^" + config.ip.key]: "" } } } // before: app => {} }, // 第三方插件配置 // webpack相关配置 // chainWebpack: config => { // // config.entry.app = ['./src/main.js']; // config.resolve.alias.set("@", resolve("src")).set("#", resolve("public")); // }, // webpack3,4的写法 configureWebpack: { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), // '~': process.cwd(), '#': resolve('public'), // components: resolve('src/components'), // util: resolve('src/utils'), // store: resolve('src/store'), // router: resolve('src/router') } } }, // pluginOptions: { // // ... // }, // 加载less加载器,路径:./public/css/common.less chainWebpack: config => { const oneOfsMap = config.module.rule("less").oneOfs.store; oneOfsMap.forEach(item => { item .use("sass-resources-loader") .loader("sass-resources-loader") .options({ // Provide path to the file with resources resources: ["./public/css/common.less", "./public/css/variable.less"] }) .end(); }); } };
axure封装request.js 部分
const service = axios.create({ baseURL: require("#/config").ip.key, timeout: 5000, // request timeout withCredentials: true, });
在单点登录中,可以在router.js中判断无权限跳转时使用:
location.href = config.serverIP + “cas/login?redirect=” + url
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。