vue项目实现github在线预览功能

2020-06-13 10:39:06易采站长站整理

最近在使用

vue-cli
脚手架工具构建自己的第一个
vue
项目,有点小激动,想把它上传到
github
并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好。

这里假设你也是和我一样使用了

vue-cli
搭建了自己的项目,并且项目也已经上传到了
github

问题1

当我们在命令行执行

npm run build
后,项目的目录下会生成一个
dist
文件夹,它里面又包含一个
static
文件夹和一个
index.html
文件,这是
webpack
最终打包好的文件

 

我们先尝试在浏览器打开

index.html

 

咦,为什么页面显示是空白的?打开控制台,细心的朋友可能会发现,

script
标签的引入路径好像不对啊,因为
static
文件夹和
index.html
是在同一个目录下的,这里却是从根目录引入
static
下的文件,正确的路径应该是
./
开头的相对路径:
src='./static/...'
或者
src='static/...'

是哪里出了问题?其实这跟配置资源的路径有关,打开项目根目录

config
文件夹下的
index.js
,定位到
build
下的
assetsPublicPath
(dev下也有一个assetsPublicPath,别搞错了,我就是在这里踩了第一个坑),把

assetsPublicPath: '/'
修改为
assetsPublicPath: './'

 

这下可找出原因,因为这里把静态资源路径设置为在根目录下,所以

script
标签的引入路径就找不到
static
文件夹下的文件了

重新执行

npm run build