vue-cli项目中生成免打包的配置文件，直接在配置文件中修改url地址刷新页面即可更改请求域名地址，不需重新打包

需求：

在打包成功之后在dist中会生成一个配置文件，配置文件中包含要请求的地址，通过直接修改配置文件中的地址即可成功修改请求地址，不需要再重新打包。

方便在不同环境下运维修改地址之后可以直接部署，避免重复打包的工作。与本地代码地址不冲突。

 

实现代码：

1.public文件夹下新建一个config.js文件，与index.html同级：

const Glod = {
  // baseURL: 'https://ltnapii.cloudcc.com/api',
  // baseURLNoApi: 'https://ltnapii.cloudcc.com/',
  baseURL: 'https://ccapi-gwi.cloudcc.com/api',
  baseURLNoApi: 'https://ccapi-gwi.cloudcc.com/',
}

exports = Glod

2.index.html中引入该js文件：

index.html为项目的根文件，即入口文件。

<script type="text/javascript" src="./config.js"></script>

3.vue.config.js中require该js文件：

const Glod = require('./public/config') // 配置文件

target: Glod.baseURL, //服务器

4.main.js中全局定义：

Vue.prototype.$baseConfig = Glod;　

5.其他js、vue文件中使用：

baseURL: Glod.baseURLNoApi,

this.$baseConfig.baseURL;

此时，代码就写完了，在打包成功之后dist文件夹下会生成创建的config.js文件，但该文件与public下的config.js不是同一个文件，在修改dist下的配置文件时，并不会修改public下的配置文件，但是请求地址会改变。因为app.js文件里的地址是用的定义的Glod常量，并不是写死的地址。

 

测试：

测试修改dist中配置文件地址时是否生效：

1.安装http-server或者anywhere 搭建web服务器环境(建议使用anywhere)

npm install anywhere -g

2.在dist打开命令行输入anywhere，浏览器会自己打开，那么你打包好的项目就相当于在服务器上运行了，这时你再修改config.js里面的地址，刷新网页，可通过查看接口访问地址是否更改为自己设置的地址，此时可验证代码是否配置成功。

 

注意：

1.在public下的配置文件中定义了一个常量Glod，在引入index.html中后成为全局常量，除了vue.config.js中不能访问到，其他文件中均可以访问。之所以在main.js中又定义了一个全局变量baseConfig是为了保持统一，在.vue文件中需要使用地址时直接通过this.$baseConfig来访问。

2.我用的是vue-cli4.4.6，不同版本的脚手架创建config.js文件的位置不同，可自行百度，但设置方式基本相同。

3.参考链接：

https://blog.csdn.net/qq_39241544/article/details/106791093

https://blog.csdn.net/qq_41772754/article/details/88106508

https://www.cnblogs.com/xiaolucky/p/12929720.html