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是某个模块名,如 在class="lazy" data-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 = ['./class="lazy" data-src/main.js'];
// config.resolve.alias.set("@", resolve("class="lazy" data-src")).set("#", resolve("public"));
// },
// webpack3,4的写法
configureWebpack: {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('class="lazy" data-src'),
// '~': process.cwd(),
'#': resolve('public'),
// components: resolve('class="lazy" data-src/components'),
// util: resolve('class="lazy" data-src/utils'),
// store: resolve('class="lazy" data-src/store'),
// router: resolve('class="lazy" data-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
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341