3回答

好帮手慕久久

2021-06-05

同学你好，解答如下：

一、先尝试将打包后的文件路径改成相对的试试：

打包后效果如下：

（还是需要添加api文件夹和json文件）

二、如果上述方式不行，建议按照github.io官网中（https://pages.github.com/ ）中的步骤，重新操作下：

1、创建github.io仓库：

注意仓库名起成“昵称(账号名).github.io”(不要加其他后缀），怀疑下图横线处多余：

2、在桌面，打开命令行工具，将github.io克隆到本地：

git clone “地址”

3、将命令行工具定位到克隆下来的文件夹中：

cd  “xxx.github.io”

4、把dist中的文件，复制到“xxx.github.io”文件夹中：

然后执行如下命令提交：

git add --all

git commit  -m  "初始提交"

git branch -M main

git push -u origin main

5、在地址栏输入“https://xxx.github.io/#/”

老师没有更改路径就能正常展示：

建议同学多操作几遍试试。

祝学习愉快！

0

hsl003

hp>用第二种方法解决了,谢谢老师?

h021-06-05

共2条回复

好帮手慕久久

2021-06-05

同学你好，解答如下：

不行的，因为没有真实的接口，页面会因为请求不到数据而没有具体内容。建议同学在dist目录下，新建一个api文件夹，并把项目中mock文件夹下的json文件放到api中：

此时用服务器环境打开项目，就可以了：

​同学可以试试。

祝学习愉快！

0

hsl003

hp>还是显示空,我截图麻烦您帮看看

这是push到github分支的内容

默认文件路径也找不到路径,我手动加上一个点,再打开文件就能找到

是哪里有问题吗?

h021-06-05

共1条回复

好帮手慕久久

2021-06-05

同学你好，解答如下：

1、devServer中的内容是开发阶段才会使用的，主要原因在于开发阶段没有真实的数据接口，所以需要配置此处，将我们的请求转到本地mock文件夹下。上线后，会有真实的接口，就不需要转发我们的请求了，所以不用更改devServer中的内容（上线后，不会使用devServer中的内容，项目不受devServer中的内容影响）。

2、别名也不用更改。因为上线的项目，是执行npm run build后打包出来的dist文件夹：

webpack打包时，会自动处理别名，会把dist文件中的各个路径都处理成正确的，不需要我们手动更改。

祝学习愉快！

0

hsl003

hp>假如我自己想github线上看下静态页面,,就直接npm run build,把dist文件挂上去就可以了是吗 ?

h021-06-05

共1条回复