vue-cli项目部署到GitHub Pages上

发表于

1. Node.js安装(自带npm)

2. Vue-cli 安装

  • 全局安装vue-cli

    1
    npm install -g vue-cli

  • 进入目录-初始化项目

    1
    vue init webpack  my-project

  • 进入项目

    1
    cd my-project

  • 安装依赖

    1
    npm install

  • 启动项目

    1
    npm run dev

3. 修改Vue项目配置

  • 大家都知道使用npm run build进行打包，这个时候你直接打开dist ‘/‘ 下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的，此时需要修改config/index.js里的assetsPublicPath的 ‘/‘， 初始项目是 ‘/‘ 他是指向项目根目录的也是为什么会出现错误，这时改为 ‘. /‘

  • 将 webpack.prod.conf.js 中的 removeAttributeQuotes 改为 false

  • 注释/dist/

4. 项目打包

1
npm run build

- 项目测试

1
http-serevr ./dist

5. 在GitHub上创建与本地项目同名的远程仓库

6. 将本地项目push到已经创建好的远程仓库

点击Settings进入后点击Source里的master branch得到的链接就是项目预览链接