vue 打包后抽取配置文件
用 vue-cli 构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，这就需要将后台接口地址打包进项目中。
此时如果只是改个接口地址也要重新打包那就太麻烦了，解决方法是直接加个config.js文件。
亲测可行!!! 本人项目结构如下:
亲测可行!!! 本人打包后文件结构如下:
步骤一:
在 public 文件夹 或者 static 文件夹 下新建一个 js 文件，就叫 config.js 吧
window.g = { // 内容因人而定:
baseURL : "http://121.12.12.123:12121/", // 基地址
company: "haha", // 公司
timeout: 60 * 1000, // 请求超时时间
}
附图:
步骤二:
在 public 文件夹 或者 static 文件夹 下的 index.html 文件中引入 config.js （注意config.js路径就ok）
注: public/static 文件夹都是放静态资源的，只是不同版本的 vue-cli 脚手架生成的文件名称不一样，
所以在public/static 文件夹下创建的文件不会被加入到打包里面去。
项目中没有就在根目录下手动创建 public 文件夹和 config.js / index.html 文件
<script type="text/javascript" src="./config.js"></script>
附图:
index.html 代码:
<!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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>哈哈哈哈</title>
<script type="text/javascript" src="./config.js"></script>
</head>
<body>
<noscript>
<strong>您的浏览器暂不支持ES6</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
步骤三:
然后你就可以在你需要的地方随意获取就行了，比如:
const config = {
baseURL: window.g.baseURL,
company: window.g.company,
timeout: window.g.timeout
}
附图:
也可以单独封装再 export default 暴露出去，怎么封装自行百度哈~
运行打包命令, 就ok啦!
npm run build
最后在打包成功之后，config.js文件不会被打包，依然单独存在，如果需要修改只需要用记事本等打开文件修改地址就OK了，而且该方法也不会影响开发模式。
989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
