文章目录
前言
前端开发过程中,会有很多关键性的、易改动的常量,例如:后台url、 第三方登录的url等其他第三方链接地址,它们都是很容易更改的常量。 要是我们把这些变量写死在代码中,所引发的问题就是,在线上,也就是生产环境中,当某个url发生了变化,那么前端就必须在代码中修改对应位置的url ,然后再次打包部署,听起来就很麻烦。。。
提示:
特别注意:
- 适用于Vue CLI 3.3 之后(包括3.3)的版本, 也就是使用vue.config.js配置文件名的项目。
- Vue CLI 3.3 之前的版本, 可能需要小小的改动
一、外挂JS配置文件
1. 创建config.js
-
在public目录中手动创建一个config.js文件,(名称不固定,这里以config名称为例)
-
编写你需要的一些配置信息内容 ,例如:
const Config = { // 后台url BACKEND_URL: 'https://www.kkk.com' }
2. 导入config.js到index.html
<script src="<%= BASE_URL %>config.js"></script>
放入index.html头部。
3. 使用config.js中的变量
- 因为导入到index.html,所以在文件的每个地方都可以去访问到config.js中的常量(这个不用讲都知道),直接使用即可, 如下图
二、外挂json配置文件
1.准备工作
npm install generate-asset-webpack-plugin --save
2. 配置vue.config.js
代码如下(示例):
// 配置接口输出文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin')
var createServerConfig = function(compilation){
// 配置需要的api接口 这里cfgJson中的内容就是导出的json文件中的内容
let cfgJson = {
VUE_APP_SERVICE_URL: 'http://demo.1.test/'
}
return JSON.stringify(cfgJson)
}
module.exports = {
chainWebpack(config) {
//输出配置文件的配置
config
.plugin('GenarateAssetPlugin')
.use('generate-asset-webpack-plugin', [{
filename: 'serverConfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation))
},
extraFiles: []
}])
}
}
3.读入数据
- 这里有一个需要注意的地方,就是:这里去请求json文件,使用fetch进行请求,(为了防止axios的baseURL被改动以后出现的错误)
代码如下(示例):
if (process.env.NODE_ENV === 'production') {
// 应用配置文件里面的接口数据
Vue.prototype.getConfigJson = function(callback) {
// 使用json文件 配置url
fetch("/v1/serverConfig.json")
.then(result => {
result.json().then(obj => {
axios.defaults.baseURL = obj.VUE_APP_SERVICE_URL;
//挂载到vue原型上面,这样就可以在项目中调用了
Vue.prototype.$configApiUrl = obj.WS_URL
callback();
});
})
.catch(error => {
console.log("getConfigJson Error!", error);
});
// 使用js 配置url
// axios.defaults.baseURL = Config.VUE_APP_SERVICE_URL
// Vue.prototype.$configApiUrl = Config.WS_URL
callback()
}
}
if (process.env.NODE_ENV === 'development') {
Vue.prototype.getConfigJson = function(callback) {
axios.defaults.baseURL = 'http://demo.10-124-130-142.sslip.io/api'
Vue.prototype.$configApiUrl = 'ws://demo.10-124-130-142.sslip.io/api'
// axios.defaults.baseURL = 'http://10.141.198.107:8000/api' // 曾
// axios.defaults.baseURL = 'http://10.141.196.130:8000/api' // 袁
// axios.defaults.baseURL = 'http://10.141.196.228:8000/api' // 杨
// axios.defaults.baseURL = 'https://www.microfoundry.fii-fmc.com/api'
// 会在该函数执行完之后,再去执行
callback()
}
}
router.beforeEach((to, from, next) => {
// 这是一个处理同步问题
Vue.prototype.getConfigJson(() => {
next()
})
})
该处使用的url网络请求的数据。
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。