Algunas configuraciones y procesos de implementación de proyectos vue

Uno, use process.env para configurar baseurl

El principio de esta configuración se puede ver en el blog anterior:
https://blog.csdn.net/weixin_42349568/article/details/114274489

2. En este proyecto, se distingue la configuración del entorno de producción de prueba y desarrollo

Archivos correspondientes:

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. Luego, realice la configuración de empaquetado correspondiente en 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"
  },

De esta forma, cuando se ejecute npm run serve, se ejecutarán los archivos .env y .env.development, y a process.env.VUE_APP_baseUrl se le asignará el valor "http: // localhost: 8080 / dcxt ​​/ shop /", (Hay un hoyo aquí, es decir, estas baseurls deben usar comillas dobles, no comillas simples, de lo contrario, se empalmarán directamente después de la ruta actual cuando se implementen en el entorno de prueba).

Cuando ejecute npm run test, se ejecutarán los archivos .env y .env.testing, por lo que a process.env.VUE_APP_baseUrl se le asignará el valor https://www.leizongxiang.com/dcxt/shop/

Es decir, después del empaquetado o la compilación local, process.env.VUE_APP_baseUrl almacena el valor de baseUrl, entonces, ¿cómo usar este valor?
Por supuesto, está configurado en el paquete global de 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' }),
}

Es utilizar esta variable para asignar la baseUrl de axios. Para realizar diferentes baseUrl correspondientes a diferentes comandos de empaquetado.
Entonces, cuando hay una interfaz como esta en la página: http: // localhost: 8080 / dcxt ​​/ shop /, esta "api / shopLicense / getShopLicense" se empalmará para formar una interfaz completa.

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

En otras palabras, solicitar datos del backend es en realidad solicitar al servidor local, y luego el servidor local accede al servidor backend para obtener los datos.

Tres, el proceso de implementación del proyecto en el entorno de prueba.

1. El back-end proporciona al front-end la ruta de la carpeta de la implementación del proyecto:

Por ejemplo, es
la carpeta shopApi en el directorio / home / ap / cloudapp / application / deploy / tomcat / devTomcat / webapps / dcxt .

2. Utilizo finalshell, después de conectarme al servidor, coloco el archivo empaquetado (npm run test) en esta carpeta

3. Puede utilizar el navegador para visitar:

Hay principalmente dos relacionados aquí, uno es baseurl porque es un entorno de prueba, se convierte en https://www.leizongxiang.com/dcxt/shop/
y luego esta configuración de vue.config.js:

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

Debido a que colocamos los archivos empaquetados no en el directorio raíz del servidor, sino en / dcxt ​​/ shopApi /, esta configuración es para declarar la dirección de ruta de los recursos estáticos que almacenamos.