Uni development of small procedures, one key to H5

1. Create uni-app project via vue-CLI scaffolding

2. Use Jenkins automatic package deployment to configure multiple environments, try first

"scripts": {
    "build:dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build"."build:prod": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",}Copy the code

NODE_ENV can only be modified if it is production. And this kind of thing?

Look at the dist folder

The original NODE_ENV = production build generates a build folder in the dist directory

And when the NODE_ENV! = production generates a dev folder under the dist directory

The Jenkins script reads the build folder permanently, causing the above problems.

3. Since vuE-CLI is scaffolding, use variables starting with VUE_APP_ to define environment variables, while NODE_ENV defines the folder to package output

"scripts": {
    "build:dev": "cross-env VUE_APP_ENV=dev NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build"."build:prod": "cross-env VUE_APP_ENV=prod NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",}Copy the code

4. So far, you can distinguish environments, but the following configuration can be more convenient when different environments have many configuration items

Reference since the community q&a: ask.dcloud.net.cn/question/73…

Create the.env.js,.env.dev.js, and.env.prod.js files in the root directory

.env.js

(function () {
  let ENV_VAR = null
  switch (process.env.VUE_APP_PLATFORM) {
    case 'h5':
      // Access path
      ENV_VAR = require(`./.env.${process.env.VUE_APP_ENV}`);
      break
    default:
      console.warn('error')
      break
  }
  if (ENV_VAR) {
    process.uniEnv = Object.create({})
    for (let key inENV_VAR) { process.uniEnv[key] = ENV_VAR[key]; }}}) ()Copy the code

.env.dev.js

const UNI_APP = {  
    BASE_API: '/dev-api'  
}  

module.exports = UNI_APP;
Copy the code

.env.prod.js

const UNI_APP = {  
    BASE_API: '/prod-api'  
}  

module.exports = UNI_APP;
Copy the code

Finally, app.vue introduces.env.js, where.env.js acts as a master controller, loading different files according to the value of VUE_APP_ENV variable, and playing the effect of environment variable switching. One thing to note is that we need to use process.unienv.xxx to get the value of the global variable we set.