项目根目录下，新建两个文件，分别为：“.env.development”和“.env.production”，对应内容如下：
# .env.development
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = 'http://localhost:8833'
# 原内容：VUE_APP_BASE_API = '/dev-api'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# .env.production
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = 'https://www.zjoss.com'
# 原内容：VUE_APP_BASE_API = '/prod-api'
新建文件vue.config.js，内容如下：
'use strict'
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: 80,
open: true,
overlay: {
warnings: true,
errors: true
},
proxy: {
'/': {
// .env.development 设计期 .env.production 生产期
target: process.env.VUE_APP_BASE_API,
changeOrigin: true, // 允许跨域
pathRewrite: { // 代理
'^/': ''
}
}
}
}
}
以上配置，就是通过代理，将请求地址 / 指向 http://localhost8833 ，设计期和生产期会自动切换定义的地址。
比如请求 /www/test.api 会代理成 http://localhost:8833/www/test.api，示例页面代码如下：
<template>
<div>
<h1>{{ msg }}</h1>
<button type="primary" @click="test">测试</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "HelloWorld",
props: {
msg: String
},
methods: {
test() {
// console.log(process.env.VUE_APP_BASE_API)
axios({
method: "get",
url: "/www/test.api",
// 防止ie缓存get请求
params: "ie-" + +new Date() + ((Math.random() * 1000).toFixed(0) + "")
})
.then(function(resp) {
console.log(resp.data);
})
.catch(resp => {
console.log(resp);
});
}
}
};
</script>
是不是感觉比vue-cli2简单一些？