vue项目部署到二级路径nginx配置以及错误的解决

因为域名有限，所以想把vue项目部署在某个域名的二级路径上，例如：https://www.example.com/someapp/下

nginx的配置如下：

location ^~ /someapp {
    #proxy_read_timeout 1800;
    #proxy_connect_timeout 1800;
    #proxy_send_timeout 1800;

    try_files $uri $uri/ /index.html;

    root /var/website/;
}

在/var/website下新建someapp目录，里面放的就是vue项目打包后的html文件

部署上去后，发现无法访问，经过摸索，发现需要修改如下几个地方，记录在这里，供需要的查阅

vue.config.js 修改如下（只把涉及到的配置加上，其他省略了）：

'use strict'

const path = require('path')

module.exports = {
  dev: {
    // 省略
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),//assetsRoot:打包后文件存放的路径
    assetsSubDirectory: 'static',//除了index.html之外的静态资源要存放的路径
    assetsPublicPath: '/someapp/',// 代表打包后，index.html里面引用资源的相对地址
    publicPath:''
  }
}

另外路由的配置也需要修改(增加base项的设置，如下)：

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path : '/',
      redirect : '/home',
    },
    { title: '登录',
      path : '/login',
      component: () => import('@/views/user/login.vue'),
      meta: {
        keepAlive: false
      }
    }
    
  ],
  base:'/someapp/'
})

vue+vite+nginx的配置，详见：https://blog.terrynow.com/2023/10/08/vue-vite-build-deploy-to-secondary-path-config/