vue项目打包上传到github 实现GitHub页面预览

vue项目打包上传到github，实现GitHub页面预览

1.打包vue项目

Vue项目：

命令行输入打包命令npm运行构建，生成dist文件夹：

包装完成。

打包常见问题1——无法加载项目资源

打开新打包的dist文件夹，浏览器将打开index.html

发现页面空白，打开控制台查找

这里可以看到，index.html文件中没有加载css或js文件。

变通方法——修改配置文件

打开项目根目录配置下的index.js文件，并进行以下修改：

也就是说，将资产公共路径： '/'更改为资产公共路径： '。/'

重新运行npm构建

包装常见问题2——无法加载字体图标

字体和图标无法正常显示

变通方法——修改生成文件

在根目录下的build中打开utils.js文件，并添加publicPath: './.控件生成样式文件代码中的“/”。

添加公共路径： '././'

重新运行npm构建

2.上传vue项目并预览它

将项目提交到仓库(包括dist目录)。如果仓库名是test。$ git子树推前缀dist原点gh-pages，提交dist目录到GH-pages。在地址栏输入https://你的github name.github.io/test/in进行预览。其他问题

使用mock模拟数据，不能使用。解决方法：创建一个. json文件把数据写死，然后引用这个文件。为了解决使用Vue-cli3.0构建的项目中风格失效的问题，在vue.config.js中设置baseurl3360'/staff/'以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。