Vue.js入门-7 VUE项目发布到Github

1.vue项目的创建

1
2
3
4
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

2.配置文件修改

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// 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
}

3.打包

1
$ npm run build

4.建立远成仓库、关联、推送

  • 第1步:创建一个名为vue-demo的Repository

  • 第2步:运行下方命令,进行关联:

1
2
$ git init
$ git remote add origin git@github.com:logan70/vue-demo.git
  • 第3步:通过如下命令进行代码合并
1
$ git pull --rebase origin master
  • 第4步:添加文件、提交文件、推送到远程库
1
2
3
4
5
6
7
8
9
// 添加文件
$ git add -A
$ git add -f dist // 强制添加dist文件夹,因为.gitignore文件中定义了忽略该文件

// 提交文件
$ git comit -m "my vue project"

// 推送到远程库
$ git push -u origin master

5.配置Github Pages

在项目中SettingGithub Pages选项内选择master branch并保存

http://username.github.io/xxx/dist

文章目录
  1. 1. 1.vue项目的创建
  2. 2. 2.配置文件修改
  3. 3. 3.打包
  4. 4. 4.建立远成仓库、关联、推送
  5. 5. 5.配置Github Pages
|