一台云服务器部署多个项目解决方案

需求：一台云服务器通过一个ip+/project-name，通过相同ip加上不同项目后缀名访问不同的项目。

实现效果

1.前端项目打包

• vite构建的项目
  打包时需要在vite.config.ts中进行输出路径的设置

export default defineConfig({
    
    
	base: "/web/"  //打包输出路径
}）

• webpack构建的项目
  打包时在vue.config.js中输出路径设置

module.exports = {
    
    
  publicPath: '/web/'
}

然后可以npm run build打包

2.项目部署

通过nginx部署到云服务器

location / {
    
    
  root   /你的路径;
}
location /web {
    
    
  alias  /你的路径;
        try_files $uri $uri / /web/index.html; #配置前端路由，解决刷新404问题
        index  index.html index.htm;
}

注意: ip/web这种情况。(1)location下面的root要修改成alias；（2）index.html修改成/web/index.html；（3）vite和webpack构建工具打包输出路径时注意要跟部署路径一致。

如图：