Nuxt静态部署gitee

1、创建一个Nuxt项目

如果有安装npm，可以直接

npx create-nuxt-app <项目名>

2、看个人爱好选择配置

3、打包

（1）服务渲染打包（SSR渲染）

npm run build

(*).nuxt文件在运行之后就自动出现在项目目录

运行命令：

npm run dev

打包完，会出现在.nuxt文件里的dist

（2）静态化打包

npm run generate

打包完，会出现在项目目录下面出现一个dist文件夹

4、打包完部署到gitee上面

在nuxt.config.js里面配置

（1）网站图标不显示可以试试按下面代码

head: {
    title: 'test',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      //{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }//原来是/网站图标在这里
      { rel: 'icon', type: 'image/x-icon', href: './favicon.ico' }//不显示添加./看看
    ]
  },

（2）路由配置仓库名

// 自定义配置路由
  router: {
    base: process.env.NODE_ENV === 'production' ? '/gitee仓库名' : '/', 
  },

（3）全部配置如下

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'test',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: './favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'element-ui/lib/theme-chalk/index.css',
    '~assets/css/index.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/element-ui'
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/',
  },

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en'
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^element-ui/],
    vendor: ['element-ui', 'axios'],//防止多次打包
    // base: process.env.NODE_ENV === 'production' ? '/nuxt_test' : '/',
    // extend(config, { isDev }) {
    //   if (!isDev) {
    //     config.output.publicPath = './static/'
    //   }
    // }
  },
  // 自定义配置路由
  router: {
    // mode: 'hash', // 使用 'hash' 主要是为了适配以相对路径打开的静态站点， 必须使用 'hash' 否则路由跳转不生效
    // base: '/moli/',
    base: process.env.NODE_ENV === 'production' ? '/nuxt_test' : '/', // 使用 './' 主要是为了适配以相对路径打开的静态站点
    // extendRoutes(routes, resolve) {
    //   routes.push({
    //     path: '/',
    //     redirect: {
    //       name: 'home'
    //     }
    //   })
    // }
  },
}

5、建议路由跳转不要用a标签