1、创建开发环境和生产环境的文件
根据vue cli 官网(https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F)的解释，我们可以直接在src同级目录下创建.env.development和.env.production，这个两个文件
image.png
2、在不同的环境变量文件中放置我们需要的参数
.env.production 这个文件配置的是生产环境的变量，放置线上访问的路径
VUE_APP_URL=https://cli.vuejs.org/
.env.development 这个文件配置的是开发环境的变量，可以让我们在本地访问线上的路径
VUE_APP_URL=https://cli.vuejs.org/
3、根据vue cli 官网的描述，创建vue.config.js文件配置参数
// 这个地方的参数配置可以参照vue cli https://cli.vuejs.org/zh/config/#全局-cli-配置，根据项目需要进行配置
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path' : './',
outputDir: 'dist',
devServer: {
proxy: {
'/api': {
target: '线上接口地址',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '/' // 根据之前vuejs的配置，用来拿掉URL上的（/api），但是暂时没有什么效果
}
},
}
}
}
4、创建mock.api.js文件，用来集中放置接口
import Vue from 'vue';
const api = process.env.VUE_APP_URL ? process.env.VUE_APP_URL : '/api';
export const APIROUTER = {
'login': api + '/admin/login.do', // 登录
}
Vue.prototype.$api_router = APIROUTER; // 直接声明出去
5、在main.js 中引入 mock.api.js
import './mock.api'; // 接口API
6、使用api接口
在components文件夹下创建login.vue
<script>
export default{
mounted() {
console.log(this.$api_router.login); // 打印出登录接口的路径
},
}
</script>
