vue-cli 是一个脚手架工具，可以帮助我们快速生成vue项目的基础结构。在实际开发中，为了方便部署，我们需要将vue项目打包成静态文件并上传到服务器。本文将介绍如何打包vue-cli项目。
一、打包命令
在终端或命令行中输入以下命令来打包Vue-cli项目：
npm run build
这个命令会将我们的Vue项目打包成一个静态文件。打包成功之后，静态文件将存储在项目根目录下的dist文件夹内。
二、打包配置
在打包Vue-cli项目时，我们可以根据需要对打包过程进行配置。Vue-cli提供了一些默认配置，我们可以通过更改Vue-cli的配置文件来覆盖这些配置。
- 修改输出目录
默认情况下，打包后的静态文件将存储在项目根目录下的dist文件夹中。如果需要将静态文件存储在其他目录中，我们可以在config/index.js中修改outputDir属性的值，例如：
module.exports = {
//...
outputDir: 'static'
}这个配置会将静态文件存储在项目根目录下的static文件夹中。
立即学习“前端免费学习笔记（深入）”；
- 修改静态文件路径
默认情况下，打包的静态文件的路径是相对路径，如果我们需要将静态文件的路径修改为绝对路径，我们可以在config/index.js中修改assetsPublicPath属性的值，例如：
module.exports = {
//...
assetsPublicPath: 'http://www.example.com/static/'
}这样，打包后的静态文件的路径将变为http://www.example.com/static/。
- 修改文件名和文件路径
我们可以通过修改config/prod.env.js文件中的filename和chunkFilename属性来更改打包后的文件名和文件路径。例如：
module.exports = {
NODE_ENV: '"production"',
filename: 'js/[name].[chunkhash].js',
chunkFilename: 'js/[id].[chunkhash].js'
}这个配置会将打包后的JS文件存储在dist/js目录下，并且文件的名称是通过哈希生成的。
三、总结
本文介绍了如何使用Vue-cli打包Vue项目。我们可以通过修改配置文件来自定义打包过程，包括修改输出目录、修改静态文件路径以及修改文件名和文件路径。希望本文对你有所帮助。
