记录---五分钟带你学会，同一个域名下，部署多个项目
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<h2 data-id="heading-0">需求描述</h2>
<ul>
<li>在某些情况下，同一个域名下，要布置多个子项目</li>
<li>比如公司没钱，资源紧张，域名少，域名临时没有申请下来，不够用等</li>
<li>或者主项目下，要有其他子项目的时候</li>
<li>这个时候，我们需要把子项目给做相应的修改</li>
<li>同时，nginx做对应的修改，才能实现文章标题的需求功能</li>
<li>注意：<strong>主项目一般不用做修改，主要是其他的子项目做修改</strong></li>
<li>这里主项目是vue2+webpack</li>
<li>子项目是vue3+vite</li>
<li>如下步骤，是子项目部署流程环节</li>
</ul>
<h2 data-id="heading-1">部署示例效果</h2>
<p>大家可以点击看一下这个实例</p>
<ul>
<li>笔者的主网站：ashuai.work/</li>
<li>笔者的主网站下的子网站：ashuai.work/extraPro/</li>
</ul>
<h3 data-id="heading-2">1 子项目的vite.config.js文件的base添加区分其他项目的前缀，比如/extraPro/</h3>
<p>如下代码，若是生产环境，就给打包的结果添加/extraPro/前缀</p>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
const isProduction = mode === 'production';
const config = {
// 生产环境加上前缀处理
base: isProduction ? '/extraPro/' : '/',
resolve: { ... },
plugins: ,
server: { ...}
};
return config;
});</pre>
</div>
<ul>
<li>这样的话，打包的dist文件中的index.html文件</li>
<li>就会在静态资源链接的地方均带有/extraPro/前缀</li>
</ul>
<p>如下图</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202505/2149129-20250508180927326-722842926.png" alt="" loading="lazy"></p>
<div>
<div>
<ul>
<li>但是这样，还是不够的，因为子项目也有路由</li>
<li>路由之前，要跳转的</li>
<li>所以，子项目在路由跳转的地方也要添加/extraPro/前缀</li>
<li>否则，子项目路由跳转，就跳到主项目</li>
<li>但是主项目没有/extraPro/之类的路由</li>
<li>所以就是404的页面</li>
<li><strong>就是确保子项目也能跳到子项目的路由前缀</strong></li>
</ul>
<h3 data-id="heading-3">2 子项目createRouter路由跳转的地方，加/extraPro/</h3>
<p>加上这个/extraPro/前缀后，子项目就可以在子项目的路由之间，相互正常跳转了</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">// router.js
import { createRouter, createWebHistory } from 'vue-router'
export const routes =[ ... ]
const router = createRouter({
history: createWebHistory('/extraPro'),
routes
})</pre>
</div>
<div>
<div>
<ul>
<li>到这一步，子项目已经基本ok了</li>
<li>是基本OK</li>
<li>可能还有一些细节需要微调</li>
<li>接下来，就是服务器的nginx配置修改</li>
<li>然后就搞定了</li>
</ul>
<h3 data-id="heading-4">3 在原来的nginx配置下，再新增一个location定位子项目前缀</h3>
<ul>
<li>这是原来的主项目的nginx配置</li>
<li>我们默认是80端口吧</li>
<li>主项目的nginx不用修改，继续用</li>
</ul>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">http {
include mime.types;
default_typeapplication/octet-stream;
sendfile on;
keepalive_timeout65;
client_max_body_size10m;
server {
listen 80;
server_namelocalhost;
add_header 'Referrer-Policy' 'origin';
location / {
try_files $uri $uri/ /index.html;
root C:/nginx-1.18.0/html/main/dist/;
indexindex.html index.htm;
}
}
}</pre>
</div>
<ul>
<li>然后，在上面的主项目的nginx的server里面，新增一个location</li>
<li>专门去定位子项目的，如下nginx配置：</li>
</ul>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">server {
listen 80;
server_namelocalhost;
add_header 'Referrer-Policy' 'origin';
# 主项目
location / {
try_files $uri $uri/ /index.html;
root C:/nginx-1.18.0/html/main/dist/;
indexindex.html index.htm;
}
# 同一个域名部署多个额外的项目，比如我要再加一个extraPro前缀的项目（子项目）
location /extraPro/ {
alias C:/nginx-1.18.0/html/extraPro/dist/;
try_files $uri $uri/ /extraPro/index.html;
}
}</pre>
</div>
<div>
<div>
<p>上述子项目配置语法解释：</p>
<p><code>location /extraPro/ { ... }</code></p>
<ul>
<li>
<p>意思是为 <code>/extraPro/</code> 路径配置处理规则。比如我的额外的子项目，都能够通过类似的配置来处理该子项目的请求。</p>
</li>
<li>
<p><strong><code>alias C:/nginx-1.18.0/html/extraPro/dist/;</code></strong></p>
<ul>
<li>该语法将请求的 <code>/extraPro/</code> 路径映射到文件系统中的 <code>C:/nginx-1.18.0/html/extraPro/dist/</code> 目录。与 <code>root</code> 不同，<code>alias</code> 会将整个路径替换掉，而不是附加在指定的根目录后。</li>
<li>例如，访问 <code>localhost/extraPro/index.html</code> 时，Nginx 会从 <code>C:/nginx-1.18.0/html/extraPro/dist/index.html</code> 读取文件返回给浏览器解析。</li>
<li>这样的话，就是能读取到子项目的html文件了</li>
</ul>
</li>
<li>
<p><strong><code>try_files $uri $uri/ /extraPro/index.html;</code></strong></p>
<ul>
<li>该指令与主项目的 <code>try_files</code> 指令类似，首先会尝试查找请求的文件，如果没有找到则返回 <code>/extraPro/index.html</code>。这是为了确保 SPA 应用能够正确加载。</li>
</ul>
</li>
</ul>
<p>综上所述：</p>
<p><strong>子项目、即额外的项目</strong> <code>/extraPro/</code> 会将请求路由到 <code>C:/nginx-1.18.0/html/extraPro/dist/</code> 目录下，同样，任何无法匹配的路径也会返回 <code>/extraPro/index.html</code>，以支持该子项目的前端路由。</p>
<p>这样的话，就可以做到，在同一个 Nginx 服务器上托管多个独立的前端项目，且每个项目都可能有自己的路由处理。</p>
<h3 data-id="heading-5">4. 细节微调，检查子项目中，是否有未能够添加到/extraPro/前缀的</h3>
<ul>
<li>比如，<strong>带有iframe的public文件夹下的资源引用</strong></li>
<li>也要手动修改一下，添加/extraPro/前缀</li>
<li>如下：</li>
</ul>
<p>原来的：</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;"><template>
<h2>资源</h2>
<iframe src="/myhtml/html2canvas.html" frameborder="0" width="100%" height="80%"></iframe>
</template></pre>
</div>
要修改成：<br>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;"><template>
<h2>资源</h2>
<iframe src="/extraPro/myhtml/html2canvas.html" frameborder="0" width="100%" height="80%"></iframe>
</template></pre>
</div>
<p>至此，恭喜你学会了：同一个域名下，部署多个项目...</p>
<blockquote>
<p>A good memory is better than a bad pen. Record it down...</p>
</blockquote>
<div>
<h2>本文转载于：https://juejin.cn/post/7499462637022543912</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></p>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/18866822
頁:
[1]