解决Vue-cli使用npm run build在生产环境中打包后本地无法打开的问题

简介：
本文介绍了如何解决使用Vue-cli通过npm run build命令在生产环境下构建项目后，出现的本地浏览器无法加载静态资源文件问题，并给出了解决方案。 在使用Vue-cli构建项目并进行打包的时候，我们常常需要区分开发环境与生产环境。通常，在生产环境中我们会执行`npm run build`命令来优化代码性能、压缩文件等操作。然而，完成这些步骤后，可能会遇到本地无法打开已打包应用的问题。这主要是由于Vue-cli默认的静态文件服务路径设置不当所引起的。 我们需要理解`npm run dev`与`npm run build`这两条命令的区别：前者用于开发环境，目的是方便开发者进行代码调试和编译；后者则在准备就绪后生成适合生产环境部署的优化压缩后的代码。执行完构建任务之后会生成一个dist目录，里面包含打包好的index.html文件以及static文件夹。 由于Vue-cli默认配置下静态资源路径设置为根目录，如果直接通过本地协议访问这些静态文件时可能出现加载问题。此时可以通过修改assetsPublicPath这一配置项来解决此问题：将该属性值从默认的空字符串（即根目录）改为相对路径`.`即可确保打包后的文件能够被正确引用。 具体操作如下： 1. 在执行`npm run build`命令前，打开项目根目录下的config/index.js文件，并修改assetsPublicPath属性为`./`。 2. 运行构建任务后，在dist目录中启动一个HTTP服务器以便预览效果。可以通过全局安装http-server工具来实现此目的：在终端输入`npm install -g http-server`命令进行安装； 3. 完成打包工作之后，回到dist文件夹内执行`http-server .`命令以开启本地Web服务。 4. 最后，在浏览器中访问由http-server提供的URL地址即可查看到生产环境下的应用界面。 通过以上步骤可以确保在本地顺利预览Vue-cli项目构建后的效果。这有助于我们在正式部署前检查打包结果并发现潜在问题，最终保证用户能够获得良好的体验。希望这些信息对遇到类似困扰的朋友有所帮助，并期待大家持续关注以获取更多实用的技术分享和经验总结。