vue 接口请求地址前缀本地开发和线上开发设置方式

开发环境 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./dev.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/prod.env.js 'use strict' const merge = require('webpack-merge') 在Vue.js应用开发中，经常会遇到一个问题：如何根据不同的开发环境（本地开发和线上生产环境）设置接口请求的地址前缀。这个问题的核心在于确保在本地开发时，请求不会发送到线上服务器，而在部署到线上后，请求能正确指向生产环境的API服务。Vue提供了灵活的配置方式来解决这个问题。 我们来看一下开发环境的配置。在`config/dev.env.js`文件中，我们定义了开发环境的变量。这里使用了`webpack-merge`库来合并配置，这样可以避免重复代码。可以看到，`API_ROOT`变量被设置为`"https://www.dev.com"`，这是本地开发时接口请求的前缀。 ```javascript // config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) ``` 对于线上生产环境，配置位于`config/prod.env.js`。同样，这里也设置了`API_ROOT`，但这次它被设置为`"https://www.prov.com"`，表示线上环境的接口地址前缀。 ```javascript // config/prod.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"production"', API_ROOT: '"https://www.prov.com"' //线上请求前缀 }) ``` 接下来，在实际的HTTP请求库，例如Axios中，我们可以利用这些环境变量来动态组装请求的完整URL。在`axios.js`中，我们获取`process.env.API_ROOT`，它会根据当前的环境（开发或生产）返回相应的前缀。 ```javascript // axios.js import Axios from 'axios'; var root = process.env.API_ROOT; // 请求拦截器 axios.interceptors.request.use((config) => { // 请求之前重新拼装url config.url = root + config.url; return config; }); ``` 在Vue组件中，我们可以直接调用Axios发起请求，而无需关心前缀问题。例如在`Order`组件中： ```javascript // components/Order.vue export default { name: 'Order', data() { return { order_list: [] } }, methods: { fetchList: function() { this.$axios.post('/api/order_list').then((res) => { if (res.result === '0000') { this.order_list = res.data; } }); } } } ``` 在这里，`/api/order_list`是相对路径，Axios会自动将其与`root`变量拼接，形成完整的URL。因此，无论是在本地开发还是线上运行，请求都会被正确地发送到对应的API服务器。 如果希望在全局范围内固定Axios的URL请求前缀，可以在`main.js`文件中进行设置，如下所示： ```javascript // main.js import axios from 'axios'; axios.defaults.baseURL = process.env.API_ROOT; // 设置全局请求前缀 new Vue({ router, store, render: h => h(App) }).$mount('#app'); ``` 通过这种方式，Vue应用可以根据当前环境自动调整接口请求的地址前缀，使得开发和部署变得更加顺畅。确保在不同环境下正确设置`NODE_ENV`和`API_ROOT`，可以避免出现请求错误，提高开发效率。同时，使用请求拦截器可以方便地处理请求前缀，简化代码。