背景
在 vue 项目中,我们可以通过不同的环境,访问不同的服务器. 虽然可以使用环境的切换,**但是在打包成html文件后,想对其进行修改就不行了**。 // 环境的切换 if (process.env.NODE_ENV == 'development') { axios.defaults.baseURL = 'https://localhost:8888';} else if (process.env.NODE_ENV == 'debug') { axios.defaults.baseURL = ''; } else if (process.env.NODE_ENV == 'production') { axios.defaults.baseURL = 'https://www.xxx.com'; } 需求,给用户提供,可以随时修改接口地址的方法 解决方案 添加一个 config.js ,用户可以通过修改此文件,使用对接口地址的配置 具体操作步骤: 1. 创建 config.js 文件 首先我们在public文件下建立一个js文件,就叫config.js吧,内容为 window.g = { AXIOS_TIMEOUT: 10000, ApiUrl: 'http://localhost:21021/api/services/app' // 配置服务器地址, } 2. 引用 config.js 文件 接下来我们只需要在index.html这个入口文件里引入该文件(注意路径就ok) <script type="text/javascript" src="/public/config.js"></script> 3. 使用 config.js 中的值 可以在封装 axios 的代码中,设置 baseUrl 时,直接使用 config.js 中配置的值。代码如下: var baseURLStr = window.g.ApiUrl // 创建axios实例 const service = axios.create({ baseURL: baseURLStr, // api的base_url timeout: 5000 // 请求超时时间 }) 总结 最后在打包成功之后,config,js文件不会被打包,依然存在public文件夹下,如果需要修改只需要用记事本打开文件修改地址就OK了,而且该方法也不会影响开发模式。 参考:http://bugshouji.com/bbs-read-run?tid=1245 |
|
|
沙发#
发布于:2021-03-18 16:54
使用了eslint ,在使用config.js 中的变量时,提示未定义,解决方案:取消eslint的提示
方法: vue.config.js 进行设置,代码如下: module.exports = { lintOnSave: false, devServer: { overlay: { warning: false, errors: false } } } |
|
|