一、
1、添加package.json
{
"name": "nuxtweb001",
"version": "1.0.0",
"description": "nuxt test",
"author": "chentingjun",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"build:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt build",
// 生成适用于gh-pages的项目根目录
"generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt generate",
"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},
"dependencies": {
"cross-env": "^5.2.0",
"element-ui": "^2.4.11",
"node-sass": "^4.11.0",
"nuxt": "^2.4.0",
"push-dir": "^0.4.1",
"sass-loader": "^7.1.0"
},
"devDependencies": {
"nodemon": "^1.18.9"
}
}2、修改nuxt.config.js
const pkg = require('./package')
// only add `router.base = '/<repository-name>/'` if `DEPLOY_ENV` is `GH_PAGES`
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
router: {
base: '/nuxtweb001/'
}
} : {}
module.exports = {
...routerBase,
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'element-ui/lib/theme-chalk/index.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'@/plugins/element-ui'
],
/*
** Nuxt.js modules
*/
modules: [
],
/*
** Build configuration
*/
build: {
transpile: [/^element-ui/],
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
}二、生成dist静态文件目录
yarn run generate:gh-pages
三、推送到gh-pages分支
yarn run deploy
当然，这都是需要自己手动编译并推送，除了这个方法，还可以通过第三方网站去监听git的提交，自动编译并部署