Detailed explanation of Vue project packaging

1. Related configuration

Case 1 (the tool used is vue-cil)

If the project is created with vue-cli, there is no config folder in the project directory, so we need to create a configuration file ourselves; create a file vue.config.js in the root directory src. Note that the file name must be vue.config.js, and then insert the following code in the file:

 //Packaging configuration file module.exports = {
  assetsDir: 'static',
  parallel: false,
  publicPath: './',
};

The structure is as follows:

Case 2 (the tool used is webpack)

If you are using webpack, modify the webpack configuration directly in the index.js file in config:

 assetsPublicPath: './'

The structure is as follows:

2. Packaging

After the configuration is completed, call up the console and enter the packaging command npm run build to start packaging;

After success, there will be the following prompt;

And the dist folder will be automatically generated in the project directory;

The dist folder is the package we need, and then it can be put on the server for deployment. It should be noted that after packaging, no matter what changes are made in the project, npm run build is required to repackage.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!