Vue CLI3 package build distinguishes between test and formal environments

The first:

The easy way to do it, without too much configuration, is to package it in a way that’s relatively easy to do, Mainly when packing The URL for the production request is simple to distinguish between the development environment and the release environment Ction) the requested URL

util/baseUrl.js

let baseUrl= ""; // This is a default URL that can be used without switch (process.env.node_env) {case 'development': BaseUrl = "http://192.168.1.105:8080/admin/v1/" / / development environment break case 'production' url: BaseUrl = "https://www.baidu.com/admin/v1/" / / production url break} export default baseUrlCopy the code

main.js

import baseUrl from './util/baseUrl.js' import axios from 'axios' axios.defaults.baseURL= baseUrl; // Set the request root pathCopy the code

$To change the packaged file name, modify outputDir: ‘You want file name’ in vue.config.js$

vue.config.js

Module.exports = {publicPath: './', // Basic URL outputDir for deploying application packages relative to HTML pages (same directory) : Dist // assetsDir: "by default,// the directory where generated static resources (js, CSS, img, fonts) are placed (as opposed to outputDir) IndexPath :'index.html',// Specify the output path of the generated index.html (as opposed to outputDir) // filenameHashing:true,// Generated static resources include hash in their file names DevServer: {port: 8080, // host:'localhost', // open:true, // Browser automatically accesses contentBase: 'SRC', / / specify the root directory of the custody hot: true, / / start hot update The first step in webpack this step only / / proxy: 'http://192.168.1.104:8080' / / proxy agent: {'/admin/v1 ': {/ / proxy target: 'http://192.168.1.104:8080/', / / / / ws API server address: true, / / agent web sockets changeOrigin: True,// Set true to represent cross-domain access // Secure: false, // If the HTTPS interface is used, you need to configure this parameter // pathRewrite: {/ / the path Such as'/API/aaa/CCC rewritten as'/aaa/CCC / / '^ / API' : '}}},Copy the code

The second:

1. The first:

Env files are suffixed to set mode-specific environment variables. Env files are suffixed to set mode-specific environment variables. Env files are suffixed to set mode-specific environment variables by passing the −−mode option argument to command line override default mode by passing −− Mode specifies the default mode of command line overwrite

Create 3 new folders in the root directory of the project for dev, test, and production. Create 3 new folders for dev, test, and production. Test (test), production (prod) file name: env. Dev,. Env. Test,. Env. Prod file named:. Env. Dev,. Env. Test,. Env. Prod file name: .env.dev,.env.test,.env.prod

And then the code in the different files,

.env.dev

NODE_ENV = 'development' VUE_APP_CURRENTMODE = 'dev' VUE_APP_BASEURL = 'local development API address'Copy the code

.env.test

NODE_ENV = 'production' VUE_APP_CURRENTMODE = 'test' VUE_APP_BASEURL = 'test environment API address 'Copy the code

.env.prod

NODE_ENV = 'production' VUE_APP_CURRENTMODE = 'prod' VUE_APP_BASEURL = 'official environment API address'Copy the code

2. Modify package.json script:

3. Final conclusion:

NPM run dev // Run NPM run build:test // Test environment package NPM run build:pro // Formal environment packageCopy the code

Vue CLI3 package build distinguishes between test and formal environments