第一次使用nuxt开发,菜狗求指点~
该项目是一个纯静态的项目,为满足seo需求使用nuxt开发,使用 starter 模板创建,项目开发完成后,使用 npm run build 打包项目之后,生成的dist中只有一个_nuxt文件夹,连index.html入口文件都没有。
因为是纯静态文件,所以服务器端并没有部署node环境,求教下这种情况下怎么部署,如果要装node环境的话,要怎么部署。
问题一:
npm run build 之后 按照sg上大佬的文章 直接 npm start 也会报如下错误:
问题二
此外,自从npm run build之后,之前开发环境项目也run不起来了,报了如下错误:
我并没有配置任何middleware, 在这个报错的基础上,刷新再次报错
以下为我的 nuxt.config.js 配置项
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'test Title',
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no'},
{hid: 'description', name: 'description', content: 'Test Title'}
],
link: [
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
]
},
/*
** Customize the progress bar color
*/
loading: './components/loading.vue',
css: [
{src: '~assets/style/main.scss', lang: 'scss'}
],
plugins: [
{src: '~plugins/vconsole', ssr: false}
],
/*
** Build configuration
*/
build: {
postcss: [
require('autoprefixer')({
browsers: ['last 3 versions']
})
],
babel: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
},
vendor: ['babel-polyfill', 'weixin-js-sdk'],
/*
** Run ESLint on save
*/
extend(config, {isDev, isClient}) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
package.json 如下:
{
"name": "official-website",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "xqFE",
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"chimee-player": "^1.1.10",
"clipboard": "^1.7.1",
"nuxt": "^1.0.0",
"sweet-modal-vue": "^2.0.0",
"vconsole": "^3.1.0",
"vue-awesome-swiper": "^3.1.0",
"vue-countup-v2": "^0.1.2",
"vue-touch-ripple": "^2.4.0",
"weixin-js-sdk": "^1.2.0"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"eslint": "^4.3.0",
"eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1",
"node-sass": "^4.7.2",
"pug": "^2.0.0-rc.4",
"sass-loader": "^6.0.6"
}
}
问题三
尝试用 generate 生成静态页面,也报了各种错误,就是所有的路由错误
路由结构如下:
再次求各位大佬指点~
谢邀~
具体参考我之前写的文章:next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序