nginx在同一域名下部署多个vue项目

IICOOM

于 2024-08-11 23:15:31 发布

阅读量55

点赞数

文章标签： nginx vue.js 运维

本文链接：https://blog.csdn.net/IICOOM/article/details/141112784

版权

本文介绍使用nginx服务器在同一个域名下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。

项目场景描述

假设你有一个域名admin.iicoom.fun
现在有两个前端项目，普通的前端多页面项目project1和vu3单页面项目project2

project1想要通过这个路径访问 https://admin.iicoom.fun

project2想要通过这个路径访问 https://admin.iicoom.fun/spa

那么项目project2应该如何打包呢？

nginx该如何配置？

project2打包

如果是vue3配置vite.config.js的base属性如下

export default defineConfig({
  base: '/spa/',
})

如果是vue2可能需要配置publicPath

module.exports = {
   publicPath: '/spa/',
}

这样打包好的静态文件路径就是下面的这个样子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/spa/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>project2</title>
    <script type="module" crossorigin src="/spa/assets/index-6bdda20d.js"></script>
    <link rel="stylesheet" href="/spa/assets/index-bcd8eda7.css">
  <link rel="manifest" href="/spa/manifest.webmanifest"></head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

如果你使用了vue-router，并且history使用了h5 history模式，需要在router中配置：

const router = createRouter({
  history: createWebHistory('/spa/'),
  routes: [
	...
  ]
})

nginx 配置

server {
    client_max_body_size 5M;

    listen 443 ssl;
    server_name admin.iicoom.fun;

    ssl_certificate /etc/nginx/ssl/xxx_cert_chain.pem;
    ssl_certificate_key /etc/nginx/ssl/xxx.key;

    location / {
        root /data/project1;
        index index.html;
    }

    location /spa {
        alias /data/project2/dist/;
        try_files $uri $uri/ /spa/index.html; # h5 history模式需要这样写
    }

    location /vue {
        alias /data/prject3/dist;             # hash 模式
    }
}

注意到location /spa 使用的是alias了吗，如果你使用了root应该无法正常解析。

选择使用 root 还是 alias 主要取决于你的具体需求和服务器配置。通常，root 更适合一般的网站结构，而 alias 更适用于需要直接映射 URL 到文件系统路径的情况。

到此为止，以及可以在同一域名下通过路径区分来部署多个前端项目了，希望本文可以帮到你。

IICOOM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nginx在同一域名下部署多个vue项目

本文介绍使用nginx服务器在下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。
复制链接

扫一扫