Steps to package and release the Vue project

After the development of the Vue project is completed, we need to package the project and launch it online. At the same time, we hope to preview the production environment project locally.

(Take the project generated by vue-cli scaffolding as an example)

1. Transition from development environment to production environment

After the project development is completed, we first need to notify the backend to obtain an online path, and then switch the previous development path to the online path.

Open the dev.env.js file in the config folder of the project and fill in the online path given by the backend.

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://sdk.*********.cn:3838/"' //Online path}

2. Set a unified request path

After the project is packaged, all js, css, and pictures will be in their own unified folders, so the previous path needs to be changed. A single modification takes too long, so what should be done?

Open utils.js in the build folder and add it according to your needs. Usually two ../ will be added.

  if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath : '../../' // Newly added content, path configuration})
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

In some cases, there will be a problem that the main path of HTML is not introduced correctly. At this time, we need to configure the index.js file inside the config folder and modify the assetsPublicPath. Note that the assetsPublicPath here is the assetsPublicPath path in the build production environment, not the assetsPublicPath in the dev development environment.

3. Run the packaging command

npm run build
//Generally, if it is not changed, it will be built

The results after running are as follows:

Generate a dist folder after running

This concludes this article about the steps for packaging and releasing the Vue project online. For more relevant content on packaging and releasing the Vue project online, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!