标签：文件 配置文件 api 修改 地址 anywhere 打包

用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是有的时候需要修改接口地址，为了避免为了修改接口地址而进行修改代码后再重新打包的繁琐，解决呢方法很多，推荐一种最便捷的方法，也是最容易操作的方法，亲测有用！

1.首先我们在public目录下的static文件下建立一个config.js文件，内容如下：

1 window.g = {
2   AXIOS_TIMEOUT: 10000,
3   ApiUrl: 'http://localhost:xxxx/api', // 配置服务器地址,
4   ParentPage: {
5     CrossDomainProxyUrl: '/Home/CrossDomainProxy',
6     BtnsApi: '/api/services/app/Authorization/GetBtns',
7     OrgsApi: '/api/services/app/authorization/GetOrgsByUserId'
8   },
9 }

2.接下来我们在public目录下的index.html这个入口文件里引入该文件（注意路径）

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

3.然后就可以在需要的地方随意获取就行了，比如：

var baseURLStr = window.g.ApiUrl
// 创建axios实例
const service = axios.create({
  baseURL: baseURLStr, // api的base_url
  timeout: 5000 // 请求超时时间
})

4.在打包成功之后，config,js文件不会被打包，依然存在static文件夹下，如果需要修改只需要用记事本打开文件修改地址就OK了，而且该方法也不会影响开发模式，是不是很简单有效呢，快去尝试一下吧：
5.最后再教一个运行打包后的dist静态文件的方法哈，如下：

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

npm install anywhere -g

6.在打包后的dist文件下打开命令行 输入anywhere，浏览器会自己打开，这时你打包好的项目就相当于在服务器上运行了，这时你再修改static文件下config.json里面的地址，刷新网页，你会发现地址已经更改为你刚改的地址了。

恭喜你又学到了一招半式！！！！！   点个赞再走哈！！

标签：文件,配置文件,api,修改,地址,anywhere,打包
来源： https://www.cnblogs.com/jspang/p/15185623.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。