Vue simple configuration of public interface address method

Simple configuration of public interface addresses

Sometimes different interface addresses are needed locally and online. At this time, you can judge based on npm run build

First configure

Create a new file first

Development environment: Instructions the address of the link during local testing
Test environment: The instructions are judged based on npm run test
Production environment: The description is the code that has been deployed online npm run build

let baseURL = ''
if (.NODE_ENV === 'production') {
    //Judge whether it is a production environment or a test environment based on VUE_APP_FLAG in the .env file    if (.VUE_APP_TITLE === 'production') {
        //production Production environment        baseURL = 'http://192.168.10.111:8080/zhikong'
    } else {
        //test test environment        baseURL = ''
    }
} else {
    //development development environment    baseURL = 'http://192.168.10.12:8080/zhikong'
}
export default baseURL

Configuration under the file

According to different instructions, explain which interface address to call

{
  "scripts": {
    "serve": "vue-cli-service serve",
    // According to different instructions, please specify which interface address to call    "build": "vue-cli-service build --mode build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  }
}

. and . files

Create a new . and . file in the root directory at the same level as the src folder

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

NODE_ENV = 'production'
VUE_APP_TITLE = 'test'

File configuration

npm run build generates different packaged folders according to the environment

const path = require('path')
function resolve (dir) {
    return (__dirname, dir)
}
 = {
    publicPath: './',
    // `npm run build` generates different packaged folders according to the environment    outputDir: .VUE_APP_TITLE === 'production' ? 'dist-zhikong' : 'test',
    assetsDir: "",
    indexPath: '',
    filenameHashing: true,
    lintOnSave: false,
    runtimeCompiler: false,
    transpileDependencies: [],
    productionSourceMap: false,
    integrity: false,
    configureWebpack:{ 
        resolve:{   
            alias:{
                '@': resolve('src'),
            } 
        }
    },
    devServer:{   
        port:8080,
        host:'0.0.0.0',
        open:true,
        https:false,
        overlay: {
            warnings: true,
            errors: true
        }
    }
}

vue interface path configuration

In personal development, most people say that the packaging of vue is a fixed form

It is written in a file and must not be changed

example:

URL: 'http://127.0.0.1:8182/',
axios()//Wayajax()//Way

How can I still change the project after it is encapsulated?

Create a file

Create a static folder in the root directory (now the version should be placed in public, which line should be used)

And create a file

{
  "name": "static",
  "version": "1.0.0",
  "url": "http://127.0.0.1:8183/",
  "dependencies": {},
}

You can put version number, project name, background path, and file path in json

axios get json file content

Synchronous requests using async await

export default async function request(config) {
//public/
await ('static/').then(res =&gt; {
    ()
    URL = 
  })
axios()//methodajax()//method}

When such a request, when the json file is not confused, you do not need to consider pre-placing the content in the vuex cache in advance. The reaction of the gap cannot be felt, and it may even be lost for some reason.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.