nuxt项目打包部署问题

第一次使用nuxt开发,菜狗求指点~

该项目是一个纯静态的项目,为满足seo需求使用nuxt开发,使用 starter 模板创建,项目开发完成后,使用 npm run build 打包项目之后,生成的dist中只有一个_nuxt文件夹,连index.html入口文件都没有。

因为是纯静态文件,所以服务器端并没有部署node环境,求教下这种情况下怎么部署,如果要装node环境的话,要怎么部署。

问题一:
npm run build 之后 按照sg上大佬的文章 直接 npm start 也会报如下错误:

clipboard.png

问题二
此外,自从npm run build之后,之前开发环境项目也run不起来了,报了如下错误:

clipboard.png

我并没有配置任何middleware, 在这个报错的基础上,刷新再次报错

clipboard.png

以下为我的 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 生成静态页面,也报了各种错误,就是所有的路由错误

clipboard.png

路由结构如下:

clipboard.png

再次求各位大佬指点~

阅读 16.7k
4 个回答
新手上路,请多包涵

执行 nuxt generate 可以直接生成dist目录

推荐问题
宣传栏