Some configurations and processes of vue project deployment

One, use process.env to configure baseurl

The principle of this configuration can be seen in the previous blog:
https://blog.csdn.net/weixin_42349568/article/details/114274489

2. In this project, the development and test production environment configuration are distinguished

Corresponding files:

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. Then do the corresponding packaging configuration in 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"
  },

In this way, when npm run serve is run, the .env and .env.development files will be run, and process.env.VUE_APP_baseUrl will be assigned the value "http://localhost:8080/dcxt/shop/", ( There is a pit here, that is, these baseurls must use double quotes, not single quotes, otherwise they will be directly spliced ​​after the current road when deployed to the test environment.)

When you run npm run test, the .env and .env.testing files will be executed, so process.env.VUE_APP_baseUrl will be assigned the value https://www.leizongxiang.com/dcxt/shop/

That is, after packaging or local compilation, process.env.VUE_APP_baseUrl stores the value of baseUrl, so how to use this value?
Of course, it is configured in the global packaging of 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' }),
}

It is to use this variable to assign the baseUrl of axios. So as to realize different baseUrl corresponding to different packaging commands.
So when there is an interface such as this on the page: http://localhost:8080/dcxt/shop/, this "api/shopLicense/getShopLicense" will be spliced ​​to form a complete interface.

6. Configuration in 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(本地)，让本地这个服务器去转发请求（原理是服务器之间不存在跨域。）于是，请求经过本地服务器转发，实际上的接口的请求就会是这个样子：

In other words, requesting data from the back-end is actually requesting the local server, and then the local server accesses the back-end server to obtain the data.

Three, the process of project deployment to the test environment

1. The backend sends the folder path of the project deployment to the frontend:

For example, it is
the shopApi folder under the directory /home/ap/cloudapp/application/deploy/tomcat/devTomcat/webapps/dcxt .

2. I use the finalshell, after connecting to the server, put the packaged (npm run test) file in this folder

3. You can use the browser to visit:

There are mainly two related here, one is baseurl because it is a test environment, it becomes https://www.leizongxiang.com/dcxt/shop/
and then this configuration of vue.config.js:

publicPath: process.env.NODE_ENV === 'testing' ? '/dcxt/shopApi/' : './',   //项目部署的地址(前面是www.leizongxiang.com)拼接这里的地址，也就是说静态资源从这里找

Because we put the packaged files not in the root directory of the server, but in /dcxt/shopApi/, this configuration is to declare the path address of the static resources we store.