webpack + vue 打包生成公共配置文件（域名）方便动态修改，不用重复打包

最新推荐文章于 2023-08-08 11:17:50 发布

@小盆友

最新推荐文章于 2023-08-08 11:17:50 发布

阅读量1.9k

点赞数 2

分类专栏： Vue 文章标签：前端 webpack Vue打包环境接口配置文件

本文链接：https://blog.csdn.net/ShIcily/article/details/106181880

版权

Vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

需求：

原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好.

方法一：

vue中有一个存放外部资源的文件夹static，它里面的文件是不会被打包编译的，所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，然后就可以全局使用。

此方法亲测有效！！！！

1、在项目中找到static文件夹，在里面创建一个配置文件，起名为config.js

┌── build 
├── config 
├── node_modules                    
├── src     
├── static  
│   ├── config.js  // 配置文件
│               
├── index.html:

2、然后在创建的config.js配置文件中，声明一个全局Windows对象Glob

/**
 * vue 打包生成配置文件，方便外部修改公共路径，不用每次都进行打包部署
 */
window.Glob = {
    BaseUrl:'http://39.99.202.195'
}

3、将此配置文件在index.html 文件中引入(注意：引用的路径)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>效果测试平台</title>
    <script type="text/javascript" src="./static/config.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

路径为：./static/config.js；千万不要忘记点；否则会报错！！

4、axios 配置文件




import axios from 'axios' 
....
let baseURL
// 判断开发环境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') {      // 开发环境
    baseURL = '/api'
} else {                                           // 编译环境
    if (process.env.type === 'test') { // 测试环境
        baseURL = window.Glob.BaseUrl  // 在这里使用配置文件中的域名
    } else {   // 正式环境                               
        baseURL = window.Glob.BaseUrl  // 在这里使用配置文件中的域名 
    }
}

到此，项目的配置文件就已经设置好了。

方法二：

使用插件 generate-asset-webpack-plugin

1、安装插件

npm install --save-dev generate-asset-webpack-plugin

2、在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件

{"ProdUrl":"http://text.com"}

3、在build/webpack.prod.conf.js中添加generate-asset-webpack-plugin

 const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
 const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件

const createJson = function() {
  return JSON.stringify(serverConfig);
};

//plugins 中使用
  plugins: [
	    //打包时生成一个配置文件
	    new GenerateAssetPlugin({
	      filename: 'serverConfig.json',
	      fn: (compilation, cb) => {
	          cb(null, createJson());
	      },
	  }),
	]

4、使用http.js文件（这是我项目的配置文件，里面包含axios请求拦截等）

import axios from 'axios';
axios.defaults.timeout = 300000;
if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = 'http://192.168.1.1:8080/'
}else if(process.env.NODE_ENV == 'production'){
    axios.get('serverconfig.json').then(res=>{
        if(res.data.baseUrl){
            axios.defaults.baseURL = res.data.baseUrl
        }else{
            axios.defaults.baseURL = 'http://192.168.1.1:8080/'
        }
    })
}

5、打包之后，在根目录就会生成serverconfig.json文件

@小盆友

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
webpack + vue 打包生成公共配置文件（域名）方便动态修改，不用重复打包

需求：原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好.方法一： vue中有一个存放外部资源的文件夹static，它里面的文件是不会被打包编译的，所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，然后就可以全局使用。此方法亲测有效！！！！1、在...
复制链接

扫一扫