vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

Posted 2020-10-09 小小猫钓小小鱼

问题来啦

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

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

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

然而，你惊奇地发现网页一片空白，丝毫没有一点点痕迹。。。

接下来，你默默的打开了控制台，看到console tab下一片404的各种找不到资源；如下图：

为什么会这样呢？还得从第一幅图的build后的提示说起，提示的中文翻译是【提示：构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作】

所以你看到控制台里的一堆404！

解决方案

仔细看一下路径，绝对路径，F盘下哪有static文件夹，那就要将打包的路径改为相对路径。这个根据build命令一路跟踪，到项目目录下的config文件夹里的index.js文件中的build对象，将assetsPublicPath中的“/”，改为“./”即可，就在前面加个点就可以了，并在build\build.js将这两句的提示信息删掉或注释掉，再打包直接用浏览器直接运行就好了。

现在再重新打包一次 npm run build，刷新你的页面或者还去你的dist目录下直接用浏览器打开里面的index.html文件即可看到资源都找到了!

欢迎加入我的前端群，大家一起讨论Vue相关前端话题，前端老司机群：3851 8473

福利赠送

我做的vue 2.0系列QQ音乐单页面应用程序，文章截图是早期版本，目前效果比较完善了，建议clone到本地查看效果或查看在线效果。

预览地址（切换到手机浏览器模式查看）： 点这里

github地址：https://github.com/chengjun2014/qq_music