一，利用process.env配置baseurl
这个配置的原理可以看之前的这篇博客：
https://blog.csdn.net/weixin_42349568/article/details/114274489
二，本项目中区分开发，测试生产环境的配置
对应的文件：
1，.env
VUE_APP_testName = '无论开发还是生产环境都会执行的内容'
2，.env.development
VUE_APP_testName = '开发环境下的base_url'
#当npm run serve的时候，就会执行这个文件，VUE_APP_baseUrl就会赋值成这个地址
VUE_APP_baseUrl = "http://localhost:8080/dcxt/shop/"
3，.env.testing
VUE_APP_testName = '测试环境下的内容'
#webpack中默认的没有testing这个mode,所以这里配置好这个后，需要在package.json中配置打包命令："test": "vue-cli-service build --mode testing",
#另外，为了让webpack能识别这个模式，需要把NODE_ENV属性的值改成对应的：
NODE_ENV = 'testing'
#当npm run test的时候，就会执行这个文件，VUE_APP_baseUrl就会赋值成这个地址
VUE_APP_baseUrl = "https://www.leizongxiang.com/dcxt/shop/"
4，.env.production
VUE_APP_testName = '生产环境下的内容'
#当npm run build的时候，就会执行这个文件，VUE_APP_baseUrl就会赋值成这个地址
VUE_APP_baseUrl = "https://www.leizongxiang.com/dcxt/shop/"
5，然后在package.json中做对应的打包配置
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test": "vue-cli-service build --mode testing",
"lint": "vue-cli-service lint"
},
这样一来，当运行npm run serve的时候，就会运行.env和.env.development文件，process.env.VUE_APP_baseUrl就会被赋值为"http://localhost:8080/dcxt/shop/"，（这里有个坑，就是这几个baseurl必须用双引号，不能用单引号，不然部署到测试环境的时候会直接把这个当字符拼接在当前路劲之后。）
而当运行npm run test 就会执行.env和.env.testing文件，这样process.env.VUE_APP_baseUrl就会被赋值为https://www.leizongxiang.com/dcxt/shop/
也就是打包或者本地编译后，process.env.VUE_APP_baseUrl就存储着baseUrl的值，那怎么使用这个值呢？
当然是在axios的全局封装时配置：
import Qs from 'qs'
export default {
baseURL: process.env.VUE_APP_baseUrl, //对应不同打包命令，产生的baseurl地址
method: 'GET',
headers: {
// 'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
params: {
},
timeout: 20000,
withCredentials: false,
responseType: 'json',
maxContentLength: 2000,
validateStatus: status => status >= 200 && status < 300,
maxRedirects: 5,
// transformRequest: [data => Qs.stringify(data, { arrayFormat: 'indices' })],
transformRequest: [data => Qs.stringify(data, {
indices: false })],
paramsSerializer: params => Qs.stringify(params, {
arrayFormat: 'indices' }),
}
就是把axios的baseUrl利用这个变量进行赋值。从而实现不同打包命令下，对应不同的baseUrl。
于是页面中有诸如这样的接口的时候：http://localhost:8080/dcxt/shop/就会拼接上这个"api/shopLicense/getShopLicense"而形成完整的接口。
6，vue.config.js中的配置
const path = require('path')
//全局引入less变量文件variable.less
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [path.resolve(__dirname, "./src/common/theme.less")]
})
}
module.exports = {
publicPath: process.env.NODE_ENV === 'testing' ? '/dcxt/shopApi/' : './', //项目部署的地址(前面是www.leizongxiang.com)拼接这里的地址，也就是说静态资源从这里找
outputDir: 'shopApi', //build打包之后的文件夹名称
assetsDir: './', //打包之后的静态资源的相对于outputDir的位置
runtimeCompiler: undefined,
productionSourceMap: false,
parallel: undefined,
devServer: {
proxy: {
'/dcxt': {
target: 'https://www.leizongxiang.com',
// target:'http://192.168.43.219:8081',
changeOrigin: true,
}
},
hot:true,
open:true,
},
//全局引入less变量文件
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
}
上图中开发环境npm run serve编译运行后的baseurl是上文说的：http://localhost:8080/dcxt/shop/，之所以是这个，是因为服务器的地址是https://www.leizongxiang.com，而npm run serve是本地运行，会报错跨域，为了解决跨域，这里的proxy配置了代理服务器。
目标地址是https://www.leizongxiang.com，这样一来，http://localhost:8080/dcxt/shop/api/shopLicense/getShopLicense访问的就不是https://www.leizongxiang.com，而是localhost(本地)，让本地这个服务器去转发请求（原理是服务器之间不存在跨域。）于是，请求经过本地服务器转发，实际上的接口的请求就会是这个样子：
也就是说，请求后端的数据，现在实际上是请求本地服务器，然后本地服务器访问后端服务器获取到数据。
三，项目部署到测试环境的流程
1，后端把项目部署的文件夹路径给前端：
比如说是：/home/ap/cloudapp/application/deploy/tomcat/devTomcat/webapps/dcxt
这个目录下的shopApi文件夹。
2，我是用的finalshell，连接服务器后，将打包后（npm run test）的文件放到这个文件夹下
3，就可以用浏览器来访问了：
和这里相关的主要是两个，一个是baseurl因为是测试环境，就变成了https://www.leizongxiang.com/dcxt/shop/
然后vue.config.js的这个配置：
publicPath: process.env.NODE_ENV === 'testing' ? '/dcxt/shopApi/' : './', //项目部署的地址(前面是www.leizongxiang.com)拼接这里的地址，也就是说静态资源从这里找
因为我们把打包的文件不是放在服务器的根目录下，而是放在/dcxt/shopApi/下，这个配置就是声明我们存放的静态资源的路径地址。