nuxt.js 部署靜態頁面[dist]到gh-pages

1、

　　一、添加package.json

 1 {
 2   "name": "nuxtweb001",
 3   "version": "1.0.0",
 4   "description": "nuxt test",
 5   "author": "chentingjun",
 6   "private": true,
 7   "scripts": {
 8     "dev": "nuxt",
 9     "build": "nuxt build",
10     "start": "nuxt start",
11     "generate": "nuxt generate",
12     "build:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt build",
13     // 生成適用於gh-pages的項目根目錄
14     "generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt generate",
15     "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
16   },
17   "dependencies": {
18     "cross-env": "^5.2.0",
19     "element-ui": "^2.4.11",
20     "node-sass": "^4.11.0",
21     "nuxt": "^2.4.0",
22     "push-dir": "^0.4.1",
23     "sass-loader": "^7.1.0"
24   },
25   "devDependencies": {
26     "nodemon": "^1.18.9"
27   }
28 }

 

 

　　二、修改nuxt.config.js

 1 const pkg = require('./package')
 2 
 3 // only add `router.base = '/<repository-name>/'` if `DEPLOY_ENV` is `GH_PAGES`
 4 const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
 5   router: {
 6     base: '/nuxtweb001/'
 7   }
 8 } : {}
 9 
10 module.exports = {
11   ...routerBase,
12   mode: 'universal',
13 
14   /*
15   ** Headers of the page
16   */
17   head: {
18     title: pkg.name,
19     meta: [
20       { charset: 'utf-8' },
21       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
22       { hid: 'description', name: 'description', content: pkg.description }
23     ],
24     link: [
25       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
26     ]
27   },
28 
29   /*
30   ** Customize the progress-bar color
31   */
32   loading: { color: '#fff' },
33 
34   /*
35   ** Global CSS
36   */
37   css: [
38     'element-ui/lib/theme-chalk/index.css'
39   ],
40 
41   /*
42   ** Plugins to load before mounting the App
43   */
44   plugins: [
45     '@/plugins/element-ui'
46   ],
47 
48   /*
49   ** Nuxt.js modules
50   */
51   modules: [
52   ],
53 
54   /*
55   ** Build configuration
56   */
57   build: {
58     transpile: [/^element-ui/],
59     
60     /*
61     ** You can extend webpack config here
62     */
63     extend(config, ctx) {
64       
65     }
66   }
67 }

 

2、生成dist靜態文件目錄

1 yarn run generate:gh-pages

 

3、推送到gh-pages分支

1 yarn run deploy

 

固然，這都是須要本身手動編譯並推送，除了這個方法，還能夠經過第三方網站去監聽git的提交，自動編譯並部署