6. Environment variables

Cli.vuejs.org/zh/guide/mo…

In our vuE-CLI scaffolding, there is the concept of environment variables, mainly divided into the build environment, development environment.

You can read information about environment variables through process.env

{BASE_URL: "/" // indicates the address where the project is running NODE_ENV: "development" // indicates the environment where the project is running. Development indicates the development environment, and production indicates the production environment}Copy the code

We use process.env.node_env ===’production’ to determine if it is a production environment

Usage Scenarios:

Const $axios = axios. Create ({/ / baseURL: 'http://127.0.0.1:8888/api/private/v1/', / / / / / / baseURL here: 'http://122.51.249.55:5000/api/private/v1', / / online baseURL: process. The env. NODE_ENV = = = 'production'? 'http://122.51.249.55:5000/api/private/v1' : 'http://127.0.0.1:8888/api/private/v1/', the timeout: 5000})Copy the code

Customize environment variable information

Create.env.development and.env.production files in the project root directory

. The env. The content of production

VUE_APP_TITLE = Wu Ge so handsome, when production # online interface address VUE_APP_APIURL = http://122.51.249.55:5000/api/private/v1Copy the code

. The env. The content of the development

# comment # # VUE_APP_ Attribute name = data VUE_APP_TITLE = VUE_APP_TITLE Development environment VUE_APP_APIURL = http://127.0.0.1:8888/api/private/v1/Copy the code

Use common, directly read environment variables inside the interface prefix address

Const $axios = axios.create({baseURL: process.env.vue_app_APIurl, // Read different environment variables timeout: 5000})Copy the code

Vue-cli scaffolding configuration

Scaffolding configuration for vue-CLI can be configured by creating vue.config.js in the root directory of the project.

// @vue/cli skeleton configuration file // expose a module, IdProd = process.env.NODE_ENV === 'production' module.exports = {// Deployment path, We can determine if it is a production environment, and if it is a production environment, let it be./ Then we can directly open the contents in dist publicPath: idProd? './' : '/', // default is / [important] outputDir: 'dist', // default is dist export folder assetsDir: 'static', // default is empty, store static files folder indexPath: 'index.html', // specify the output path of the generated index.html devServer: {host: '127.0.0.1', // run the host address port: 3000, // run the port open: ConfigureWebpack: {plugins: [], // configureWebpack plug-in module: Echarts: 'echarts'}}, // Configure the webpack configuration. config => { } }Copy the code

8. Packaging optimization

  • Suggestion: Configure publicPath publicPath: process.env.node_env === ‘production’? ‘./’ : ‘/’, // default is / [important]

  • If you can, do volume optimization

  • NPM run build // The dist directory appears, and the dist directory can be given to the backend.

  • Project optimization

    • 1, Reduce the volume of the image tinypng.com/ Do not affect the quality of the image
    • 2. CDN can be used for font styles and CSS files.
    • 3. Static content that does not need to be packaged and optimized is recommended to be placed in public rather than assets.
    • 4. Use lazy route loading
    • 5. Optimize webpack’s package content, using CDN resources instead of packaging

  • How do I view project volume size

    • Method 1: Use the VUE UI to view information

  • Mode 2: Webpack plug-in analysis, configure the output in vue.config.js

    Const {BundleAnalyzerPlugin} = require(‘ webpack-bundle-Analyzer ‘) const {BundleAnalyzerPlugin = require(‘ webpack-bundle-Analyzer ‘)

    module.exports = { … Plugins: [new BundleAnalyzerPlugin()]}… // Other configuration}

Once configured, we execute NPM run build –report while packing

This configuration will run volume reports in both build and development environments! , [It is recommended to configure only the production environment, as follows]

Complete the vue. Config. Js

// @vue/cli skeleton configuration file // expose a module, NODE_ENV === 'production' // Import webpack, no installation required, Const {BundleAnalyzerPlugin} = require(' webpack-bundle-Analyzer ') let plugins = [] // webapck plugin let plugins = [ CDN = {CSS: [], js: [' https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js']} / / CDN resource let externals = {echarts: If (idProd) {plugins = [new BundleAnalyzerPlugin()] CDN = {CSS: [' https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css ', 'https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css', 'https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css', 'https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css', 'https://unpkg.com/[email protected]/lib/theme-chalk/index.css'], js: [' https://cdn.jsdelivr.net/npm/[email protected] ', 'https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js', 'https://cdn.staticfile.org/axios/0.18.0/axios.min.js',' https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js', 'https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js', 'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js',' https://cdn.staticfile.org/quill/1.3.4/quill.min.js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js', Externals = 'https://unpkg.com/[email protected]/lib/index.js']} {/ / key is a package name / / value is introduced in the global CDN resource exposure variable name in the window, it is important to note that Vue: 'vue ', 'element-ui': 'Element ',' vue-Router ': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': Module. exports = {VueQuillEditor'}} module.exports = {VueQuillEditor}} module.exports = {VueQuillEditor}} module.exports = {VueQuillEditor}} module.exports = {VueQuillEditor}} module.exports = { // default is/outputDir: 'dist', // default is dist: assetsDir: 'static', // default is empty, store static files folder indexPath: 'index.html', // specify the output path of the generated index.html devServer: {host: '127.0.0.1', // run the host address port: 3000, // run the port open: Plugins: {plugins: plugins: {plugins: plugins: {plugins: plugins: {plugins: plugins: {plugins: {plugins: plugins: {plugins: {plugins: {plugins: {plugins: {plugins: {plugins: {plugins: {plugins: {plugins: {plugins:}} {}, // configure loader externals: externals // exclude compiler items}, // configure webpack related configuration information. Config => {// Configures the contents of the webpack-plugin-html plug-in. Plugin (' HTML ').tap(args => {args[0]. CDN = CDN return args // Need to return})}}Copy the code

public/index.html

<! DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %> <title><%= htmlWebpackPlugin.options.title %></title> <link rel="stylesheet" href="./fonts/iconfont.css"> <head> <! - introduction of style - > < % for (var CSS of htmlWebpackPlugin. Options. The CDN. CSS) {% > < link rel = "stylesheet" href = "< % = CSS % >" > < %} % > </head> <! - the introduction of JS - > < % for (var JS of htmlWebpackPlugin. Options. The CDN. JS) {% > < script SRC = "< % = JS % >" > < / script > < %} % > < / head >Copy the code