nuxt项目部署到一级域名子目录

这个项目是放在一级域名下的子目录，所以想记录下(match-test.simuwang.com/competition)competition为子目录

跨域代理处理

安装依赖 nuxt/proxy，nuxtjs/axios，在nuxt.config.js里配置

// nuxt.config.js

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
],
axios: {
   proxy: true,
   withCredentials: true,
},
proxy: {
// 由于该项目是放在一级域名子目录下match-test.simuwang.com/competition
'/competition/match': {
      target: 'https://match-test.simuwang.com', // 可区分环境做不同环境的域名代理
      changeOrigin: true,
      pathRewrite: { // 路径重写，
        '^/competition/match': ''
      }
    },
}

路由跳转处理

Nginx把/competition反代到/competition，不然线上会出现资源引用路径找不到，加载不了样式，因为部署到一级域名下子目录，所以除了开发环境，路由前缀都需要加上子目录，另外解决办法：跳转绝对地址，但是会出现屏幕闪烁，用户体验不友好

// nuxt.config.js

const routerPrefix = process.env.NODE_ENV === 'development' ? '' : '/competition' 

router: {
    mode: 'history',
    base: routerPrefix,
    resourceHints: false,
    prefetchLinks: false
  },