Configuración de Vue2 + Webpack 3 con diferentes nombres de dominio después de empaquetar en diferentes entornos

Requisitos del proyecto

La dirección en línea de la versión oficial del entorno de producción es: www.xxxx.com

La dirección en línea de la versión de prueba del entorno de producción es: www.test.com

Entorno de desarrollo local entorno: localhost: 8080

La compañía utiliza el sistema automatizado de empaquetado y despliegue de Jenkins. En el entorno real de desarrollo o producción, necesitamos configurar los archivos empaquetados para diferentes nombres de dominio. Lo que hice al principio fue modificar esta dirección antes de empaquetar cada vez en main.js.

 

La estructura del directorio del proyecto es la siguiente

Los principales cambios están en build / config en dos carpetas

Cree un nuevo archivo test.env.js en config. ¡Este archivo establece las comillas para el nombre del entorno de prueba!

'use strict'
module.exports = {
   NODE_ENV: '"testing"',
   ENV_CONFIG:'"test"'
}

Modificar el archivo prod.env.js Este archivo establece el nombre del entorno de producción

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"'
}

Modifique webpack.prod.config.js en la carpeta de compilación 

// const env = require('../config/prod.env') //这是原来的代码 注释掉 下一行是新加的代码
const env = config.build[process.env.env_config+'Env']

Modifique el código del objeto de compilación index.js en la carpeta de configuración, aquí está la introducción de diferentes nombres de entorno

build: {
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    ..........
        }

El punto está aquí, lo anterior es escribir un código simple, el verdadero negocio sigue siendo un gran tipo para empaquetar en una biblioteca para que lo usemos directamente. Instalar script cross-env cross-env

npm install -D cross-env

Aprenda sobre esta biblioteca

 

Modifique el archivo build.js en la carpeta de compilación, que es la entrada de configuración principal al ejecutar el paquete.

'use strict'
require('./check-versions')()

// process.env.NODE_ENV = 'production' 这个地方注释掉

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')


// const spinner = ora('building for production...') 这个地方注释掉 下两行spinner代码加上
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()

Se han configurado los ajustes básicos OK, lo siguiente comenzó a configurar el comando npm packaging en diferentes entornos 

El objeto de scripts de archivo package.json es principalmente build - test / build - prod Estos dos entornos de desarrollo local de desarrollo no hemos realizado ningún cambio

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js",
    "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

A continuación, configure el cambio entre el entorno de compilación y el entorno en línea, incluido el nombre de dominio empaquetado

Cree una nueva configuración u otro nombre como common en src, y cree un nuevo env.js para generar baseUrl. Tenga en cuenta que en {}, solo imprimo aquí un nombre de dominio básico. Otros parámetros comunes necesarios para diferentes configuraciones según el entorno de empaquetado también pueden Configure aquí y salida.

/*
 * 配置编译环境和线上环境之间的切换
 * baseUrl: 域名地址
 */
let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
// 本地开发
  baseUrl = "http://localhost:8080";
} else if (process.env.NODE_ENV == 'production') {
//正式
  baseUrl = "http://www.xxx.com";
} else if (process.env.NODE_ENV == 'testing') {
//测试
  baseUrl = "http://www.test.com";
}
export {
  baseUrl
}

Finalmente, main.js introduce esta dirección,

import {
  baseUrl
} from "@/config/env";

import myAxios from "@/utils/plugins/http"
var $vm = new Vue({
  el: "#app"
})

console.log("===========baseUrl===========", baseUrl)

Prueba 

npm run build - prod Primero modificamos la ora, la ruleta es el segundo cuadro rojo

Oh