How to package Vue-cli project? Detailed explanation of method

Vue-cli is a scaffolding tool that can help us quickly generate the infrastructure of a Vue project. In actual development, in order to facilitate deployment, we need to package the Vue project into a static file and upload it to the server. This article will introduce how to package Vue-cli projects.

1. Packaging command
Enter the following command in the terminal or command line to package the Vue-cli project:

npm run build

This command will package our Vue project into a static file. After successful packaging, the static files will be stored in the dist folder in the project root directory.

2. Packaging configuration
When packaging the Vue-cli project, we can configure the packaging process as needed. Vue-cli provides some default configurations, which we can override by changing Vue-cli's configuration files.

1. Modify the output directory
   By default, the packaged static files will be stored in the dist folder in the project root directory. If you need to store static files in other directories, we can modify the value of the outputDir attribute in config/index.js, for example:

module.exports = {
    //...
    outputDir: 'static'
}

This configuration will store static files in the project root directory in the static folder.

2. Modify the static file path
   By default, the path of the packaged static file is a relative path. If we need to modify the path of the static file to an absolute path, we can do so in config/index. Modify the value of the assetsPublicPath attribute in js, for example:

module.exports = {
    //...
    assetsPublicPath: 'http://www.example.com/static/'
}

In this way, the path of the packaged static file will become http://www.example.com/static/.

3. Modify the file name and file path
   We can change the packaged file name and file path by modifying the filename and chunkFilename attributes in the config/prod.env.js file. For example:

module.exports = {
    NODE_ENV: '"production"',
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: 'js/[id].[chunkhash].js'
}

This configuration will store the packaged JS files in the dist/js directory, and the file name is generated by hashing.

3. Summary
This article introduces how to use Vue-cli to package Vue projects. We can customize the packaging process by modifying the configuration file, including modifying the output directory, modifying the static file path, and modifying the file name and file path. Hope this article is helpful to you.

The above is the detailed content of How to package Vue-cli project? Detailed explanation of method. For more information, please follow other related articles on the PHP Chinese website!