github上传、预览Vue项目

版权声明：无需声明 https://blog.csdn.net/Sun_Shydeo/article/details/88638077

1、建立Github库

参考建立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  第一次关联之后提交

扫描二维码关注公众号，回复： 6048348 查看本文章

$ 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>