vue公共文件提取,打包后修改无需重新打包
2018-12-25 本文已影响269人
一名有马甲线的程序媛
vue项目中公共路径在打包之后一旦遇到整体的路径更改就需要再次打包。如果打包后的外部文件，直接修改就能生效，则能事半功倍。下面就介绍两种方案：
方案一：在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不会被webpack打包，这样打包后改baseUrl路径，就能直接生效了。
方案二：在public文件夹下提取config.js文件
由于法一的json文件不能写注释，所以提出js为公共文件。
- serverConfig.js代码如下：
const serverConfig = {
baseUrl: '//192.168.1.200:8080',
};
- 引入
不要使用import引入该文件，在index.html页面使用script标签引入
<!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文件内声明serverConfig为全局变量
globals: {
'serverConfig': false
}
- 调用
在其他文件内直接调用全局变量config即可，false指定serverConfig为只读。
const baseUrl = serverConfig.baseUrl;
- 打包后，config.js未被压缩，可进行修改
image.png
方法二借鉴简书，戳我查看
以上两个方法亲测好用~ 有需要的可以直接拿走，不谢~
