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

问题来啦

运行

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