1つは、process.envを使用してbaseurlを構成する
この構成の原則は、前のブログで見ることができます：https：
//blog.csdn.net/weixin_42349568/article/details/114274489
2.このプロジェクトでは、開発環境とテスト実稼働環境の構成が区別されます
対応するファイル：
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 runserveが実行されると、.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(本地)，让本地这个服务器去转发请求（原理是服务器之间不存在跨域。）于是，请求经过本地服务器转发，实际上的接口的请求就会是这个样子：
つまり、バックエンドからのデータの要求は実際にはローカルサーバーを要求しており、ローカルサーバーはバックエンドサーバーにアクセスしてデータを取得します。
3つ目は、テスト環境へのプロジェクト展開のプロセスです。
1.バックエンドは、フロントエンドにプロジェクト展開のフォルダーパスを提供します。
たとえば
、ディレクトリ/ home / ap / cloudapp / application / deploy / tomcat / devTomcat / webapps / dcxtの下にあるshopApiフォルダです。
2. finalshellを使用し、サーバーに接続した後、パッケージ化された（npm run test）ファイルをこのフォルダーに配置します
3.ブラウザを使用して以下にアクセスできます。
ここでは主に2つ関連しています。1つはテスト環境であるため
baseurlで、https：//www.leizongxiang.com/dcxt/shop/になり、vue.config.jsの次の構成になります。
publicPath: process.env.NODE_ENV === 'testing' ? '/dcxt/shopApi/' : './', //项目部署的地址(前面是www.leizongxiang.com)拼接这里的地址，也就是说静态资源从这里找
パッケージ化されたファイルをサーバーのルートディレクトリではなく/ dcxt / shopApi /に配置するため、この構成では、格納する静的リソースのパスアドレスを宣言します。