vue項(xiàng)目中公共路徑在打包之后一旦遇到整體的路徑更改就需要再次打包。如果打包后的外部文件，直接修改就能生效，則能事半功倍。下面就介紹兩種方案：
方案一：在public文件夾下提取config.json文件
config.json文件
在入口
main.js中引入
import Vue from 'vue';
import ApplyLogin from './ApplyLogin.vue';
import router from '../router/applyRouter.js';
import http from '@/utils/http.js';
import { store } from '@/store/store.js';
function getServerConfig () {
return new Promise((resolve, reject) => {
axios.get('./serverConfig.json').then(result => {
let config = result.data;
for (let key in config) {
Vue.prototype[key] = config[key];
}
resolve();
});
});
}
async function main () {
await getServerConfig();
new Vue({
router,
store,
render: h => h(ApplyLogin)
}).$mount('#login');
}
main();
json不會(huì)被webpack打包，這樣打包后改baseUrl路徑，就能直接生效了。
方案二：在public文件夾下提取config.js文件
由于法一的json文件不能寫(xiě)注釋，所以提出js為公共文件。
- serverConfig.js代碼如下：
const serverConfig = {
baseUrl: '//192.168.1.200:8080',
};
- 引入
不要使用import引入該文件，在index.html頁(yè)面使用script標(biāo)簽引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mits-front</title>
<script type="text/javascript" src="serverConfig.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
- 然后在
.eslintrc.js文件內(nèi)聲明serverConfig為全局變量
globals: {
'serverConfig': false
}
- 調(diào)用
在其他文件內(nèi)直接調(diào)用全局變量config即可，false指定serverConfig為只讀。
const baseUrl = serverConfig.baseUrl;
- 打包后，config.js未被壓縮，可進(jìn)行修改
image.png
方法二借鑒簡(jiǎn)書(shū)，戳我查看
方案三：在public文件夾下提取serverConfig.yml文件
由于代碼打包后給售后人員部署到現(xiàn)場(chǎng)，售后可能不懂編程語(yǔ)法，所以需要將可動(dòng)態(tài)改寫(xiě)的配置寫(xiě)到配置文件中，這里就寫(xiě)在yml配置文件下。
法一：
- 在public下新建serverConfig.yml文件，并填寫(xiě)需要日后動(dòng)態(tài)更改配置的內(nèi)容
# 系統(tǒng)整體配置
# 是否打開(kāi)日志
log: true
# 當(dāng)前環(huán)境
model: dev
#開(kāi)發(fā)環(huán)境
dev:
baseUrl: 'http://baidu.dev.com'
#測(cè)試環(huán)境
test:
baseUrl: 'http://baidu.test.com'
#線上環(huán)境
prod:
baseUrl: 'http://baidu.prod.com'
- 在公共入口文件
main.js引入
import yaml from 'js-yaml';
import Vue from 'vue';
import router from '../router.js';
import http from '@/utils/http.js';
Vue.prototype.$http = http;
/**
* async
*/
async function main () {
new Vue({
router,
render: h => h(App)
}).$mount('#app');
}
http.get('./serverConfig.yml').then(res => {
var model = yaml.safeLoad(res).model;
Vue.prototype.$serverConfig = yaml.safeLoad(res)[model];
// 關(guān)閉log
if (!yaml.safeLoad(res).log) {
console.log = function () {
return false;
};
}
main();
});
打印出來(lái)的yml文件會(huì)以json格式輸出
法二：
也可將yml文件存到vuex中
image.png
image.png
