使用vue-cli搭建项目打包之后上传到github之后设置预览,点开之后一片空白,WTF? 明明 npm run dev
跑的时候一点问题没有啊!如果你遇到同样的问题,请继续看下去。
在vue-cli中,有一个 .gitignore
文件,一般某个项目dev过程中都会产生一些中间文件,这些文件是我们不想要追踪的,git中可以使用.gitignore文件来忽略这些文件

注意那个 dist/
dist文件是 npm run build
执行后被编译打包生成的文件,CSS、JS、图片等文件都在dist文件中,所以该文件必须要提交到github上,我们需要把它删掉然后再上传。
这时由于文件都在dist里面,所以我们的预览需要手动加上dist/
,如下图

好的,接下来就可以愉快的预览了!刷新页面之后发现...摔!为什么还是空白啊,打开控制台看看报错,原来是文件的路径错误了,这个就好解决了,只需要找到配置文件更改下路径,找到config/index.js文件,如下图

修改图中assetsPublicPath的参数,每次 npm run build
后的文件路径将会按照参数生成。
网友评论