版权声明:无需声明 https://blog.csdn.net/Sun_Shydeo/article/details/88638077
1、建立Github库
2、构建Vue项目
3、修改相应文件,达到预览效果
3.1、修改 config/index.js
在build中将 assetsPublicPath : '/' 改为 assetsPublicPath : './'
module.exports = {
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //此处将目录由 '/' 改为 './'
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
* 重新打包 npm run build
3.2 修改项目目录下 .gitignore 文件,删除 /dist/,防止上传github时 忽略 dist文件夹
.DS_Store
node_modules/
/dist/ //将此项删除
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
4、上传项目至库
这里选择将项目上传为库中之一,在项目文件夹所在同级目录中 右键--Git Bush Here 进入命令窗口
git init 初始化当前目录
$ git init
git add . 将所有文件提交到暂存区
$ git add .
git commit -m '提交说明'
提交到版本库中即可。
$ git commit -m '提交说明'
git remote add origin '你的仓库位置' 将本地仓库与GitHub网站的仓库进行关联。
$ git remote add origin https://github.com/maleSun/vue.git
需要注意的是,GitHub网站上的仓库并非空,创建库时创建了一个README文档,因此需要将两者合并才能推送成功。
$ git pull --rebase origin master
git push -u origin master 第一次关联之后提交
$ git push -u origin master
若失败,使用 git push -f origin master
$ git push -f origin master
5、访问地址
进入库中Setting,复制 GitHub Pages下的 github pages 的网址,并添加 /项目名/dist/ 即可访问,如下:
https://malesun.github.io/vue/resume/dist/
6、其他细节
为保证/dist/index.html本地预览有效,以及github预览刷新有效,打包时保持默认路由模式 mode:hash
export default new Router({
mode:'history', //删除此配置保证正常本地预览
routes: [
//...
]
}
路由模式为 mode:'history'时,打包后 App.vue <router-view/> 无法正常显示,需要后台配置,后续跟进
<div id="app">
<!-- mode:'history' 时 仅能加载 <app-footer>内容 -->
<router-view ></router-view>
<app-footer></app-footer>
</div>