Detailed process of Vue front-end packaging

1. Add packaging command

Add configuration to package.json
The code published online by npm run build is not easy to debug

Order:

• ①npm run build:dev Development and debugging environment
• ②npm run build:prod online debugging environment

 "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build --mode prod"

2. Run the packaged code

Do not double-click dist/index.html
directly dist/index.html
Need to be run in the http container: serve tomcat nginx iis
This time use serve

Download serve: npm i -g serve

Error:

Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node global\node_modules.staging'

Solution: User -> Personal User -> Delete .npmrc file

Start the packaged directory : serve dist

3. Package and specify different environment variables

Add environment variables:

• ① Development: Create a .env.dev file in the root directory (corresponding to the mode in package.json)
• ② Online: Create a .env.prod file in the root directory (corresponding to the mode in package.json)
  

Use process.env.NODE_ENV etc. where you need to specify variables dynamically

// .env.dev
##Development environment NODE_ENV=development
##Variables start with VUE_APP_ VUE_APP_URL=http://www.dev.com

// .env.prod
##Production environment NODE_ENV=production
VUE_APP_URL=http://www.prod.com

4. Package custom files

• vuecli is based on webpack

• VueCli zero configuration
• No configuration required, you can specify vue.config.js

npm run build:prod lacks comments, blank lines, compression, etc.

4.1 Remove third-party packages

Code breakdown:

• ① Third-party packages: vue elementui axios , etc.
• ② Development code: written by myself
  

Remove third-party packages: Use cdn provided by third parties (free or paid)
step:

• ① Find the cdn resource of the third-party package and add it to public/index.html

• ② Delete the previous import
• ③Configure exclusion of third-party packages in vue.config.js

module.exports = {
  // Open the relative path of the file access Independent project access through the project root directory publicPath: './',
  // When developing, you don't need map online --> provide code mapping to facilitate debugging code productionSourceMap: process.env.NODE_ENV == 'development' ? true: false,
  // Configure webpack
  configureWebpack: config => {
    // config---vuecli default configurationObject.assign(config, {
      // Exclude dependent packages externals: {
        vue: 'Vue'
      }
    })
  },
}

4.2 gzip compression

下載npm i -D compression-webpack-plugin

5. Packaging error:

ERROR TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined

Cause of error: The scaffolding configuration gzip package does not support this version
Solution: Use npm install [email protected] --save-dev
Configure in vue.config.js

Packaging will generate files ending in gz:

let CompressionWebpackPlugin = require('compression-webpack-plugin')

configureWebpack: config => {
    let plugins = [
      new CompressionWebpackPlugin({
        // Compression algorithm: 'gzip',
        // Match compressed file test: /\.js$|\.css$/,
        // For compression threshold greater than 10k: 10240 
      })
    ]
    if (process.env.NODE_ENV == 'production') {
      config.mode = "production"
      config.plugins = [...config.plugins, ...plugins]
    } else {
      config.mode = 'development'
    }
  },

Browser view:

• Request header: Accept-Encoding: gzip, deflate, br

• Response header: Content-Encoding: gzip

Packaging deployment mode:

hash: After packaging, dist runs directly in the http container, which is consistent with online

History: After packaging, the scaffolding refresh will not 404, but the online will 404
Solution: The front-end code needs to be deployed together with the back-end, and the back-end is responsible for jumping to the front-end

This is the end of this article about the detailed process of Vue front-end packaging. For more relevant Vue front-end packaging detailed process content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!