vue-cli构建项目 npm run build打包后怎么在本地查看效果

点击查看原文

本文以vue官方脚手架vue-cli构建的项目为例。

运行npm run dev以开发模式打开调试好了你的案例程序；你还不满足于仅仅把代码放在github上，想把项目打包，然后在本地预览或者放在个人博客上供大家直接看效果学习。

这时如果直接运行npn run build是可以运行并打包你的代码的，不会报任何异常或错误，但是会看到打包完成有这样一句提示：

看到这里第一感觉：不是警告色，应该没啥问题，（也许是英语不过关也许是懒得不想看反正是没看这段提示是什么意思）抱着试试看的侥幸心理，默默用浏览器打开了刚build生成的dist目录下的index.html文件！

然而惊奇地发现网页一片空白，丝毫没有一点点痕迹。打开了控制台，看到console tab下一片404的各种找不到资源

解决方案

打开项目文件夹。找到config文件夹里的index.js文件中的build对象，将assetsPublicPath中的“/”，改为“./”，并在build\build.js将这两句的提示信息删掉或注释掉，再打包直接用浏览器直接运行就好了。

亲测有效