vue 打包后抽取配置文件

vue 打包后抽取配置文件

用 vue-cli 构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,这就需要将后台接口地址打包进项目中。
此时如果只是改个接口地址也要重新打包那就太麻烦了,解决方法是直接加个config.js文件。

亲测可行!!! 本人项目结构如下:
vue 打包后抽取配置文件_第1张图片
亲测可行!!! 本人打包后文件结构如下:
vue 打包后抽取配置文件_第2张图片

步骤一:

public 文件夹 或者 static 文件夹 下新建一个 js 文件,就叫 config.js

window.g = { // 内容因人而定:
    baseURL : "http://121.12.12.123:12121/", // 基地址
    company: "haha", // 公司
    timeout: 60 * 1000, // 请求超时时间
}

附图:
vue 打包后抽取配置文件_第3张图片

步骤二:

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>

附图:
vue 打包后抽取配置文件_第4张图片
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
}

附图:
vue 打包后抽取配置文件_第5张图片
也可以单独封装再 export default 暴露出去,怎么封装自行百度哈~

运行打包命令, 就ok啦!

npm run build

最后在打包成功之后,config.js文件不会被打包,依然单独存在,如果需要修改只需要用记事本等打开文件修改地址就OK了,而且该方法也不会影响开发模式。

你可能感兴趣的:(vue打包,指定打包,打包抽离,vue.js,webpack,前端)