一、
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 }
2、修改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 }
二、生成dist静态文件目录
1 yarn run generate:gh-pages
三、推送到gh-pages分支
1 yarn run deploy
当然，这都是需要自己手动编译并推送，除了这个方法，还可以通过第三方网站去监听git的提交，自动编译并部署