vue-cli webpack上传github预览问题

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

1.jpg

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

image.png

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容