nginx部署同一个域名多个vue项目配置
<p><span style="font-size: 18px">首先准备两个vue项目 端口 例如：8080 8087 </span></p><p><span style="font-size: 18px">第一个正常打包即可 访问时只需要输入域名 </span></p>
<p>www.xxx.com;</p>
<p><span style="font-size: 18px">第二个项目访问路径为www.xxx.com/bi;</span></p>
<p><span style="color: rgba(227, 31, 27, 1)">在第二个项目找到配置文件修改自己的虚拟访问路径</span></p>
<div>
<div>ps:
<h3 id="baseurl">baseUrl</h3>
<p>从 Vue CLI 3.3 起已弃用，请使用<code>publicPath</code>。</p>
<p>增加请求前缀</p>
<p><img src="https://img2020.cnblogs.com/blog/1409892/202010/1409892-20201028103232794-1713448095.png"></p>
<p> </p>
<p> </p>
<p>然后修改路由</p>
<p><span style="color: rgba(255, 0, 0, 1)">router/index.js</span></p>
<p> <img src="https://img2020.cnblogs.com/blog/1409892/202010/1409892-20201028103322948-1299849239.png"></p>
<p> 当打包好了之后修改index.html</p>
<p>加入<img src="https://img2020.cnblogs.com/blog/1409892/202010/1409892-20201028103451777-1534808350.png"></p>
<p> </p>
<p><strong> <meta base=/bi/></strong></p>
<p><strong>默认打包生成dist然后将其目录下所有的文件上传到你的应用服务器上</strong></p>
<p><strong>不需要dist，在服务器先新建一个 bi （就是你的前缀文件夹）然后将这些文件上传到里面去</strong></p>
<p><strong><img src="https://img2020.cnblogs.com/blog/1409892/202010/1409892-20201028103757262-156576331.png"></strong></p>
<p>打包上传到Linux 路径后</p>
<p>nginx.conf配置</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">server {
listen 80;
server_namewww.xxx.com;
index index.html index.htm;
#第一个vue项目
location / {
root /usr/local/server/war/portal;
indexindex.html index.htm;
}
#第二个vue项目
location /bi {
alias /usr/local/server/war/bi/;#注意这里
indexindex.html index.htm;
try_files $uri $uri/ /bi/index.html; #解决页面刷新404问题
}
#后端项目 请求转发至8090端口
location /prod-api {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://您的ip地址:8090/prod-api;
}
error_page 500 502 503 504/50x.html;
location = /50x.html {
root html;
}
}</span></pre>
</div>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"> </span></pre>
</div>
<p>root与alias区别</p>
<p>最基本的区别：alias指定的目录是准确的，root是指定目录的上级目录，并且该上级目录要含有location指定名称的同名目录。另外，根据前文所述，使用alias标签的目录块中不能使用rewrite的break。</p>
<p>(1) . alias虚拟目录配置中，location匹配的path目录如果后面不带"/"，那么访问的url地址中这个path目录后面加不加"/"不影响访问，访问时它会自动加上"/"；<br> 但是如果location匹配的path目录后面加上"/"，那么访问的url地址中这个path目录必须要加上"/"，访问时它不会自动加上"/"。如果不加上"/"，访问就会失败！<br>(2) . root目录配置中，location匹配的path目录后面带不带"/"，都不会影响访问。</p>
<p>所以，一般情况下，在nginx配置中的良好习惯是：<br>1）在location /中配置root目录；<br>2）在location /path中配置alias虚拟目录。</p>
<p>我在配置的时候 加上了 "/"那么在访问的时候 必须后面加上"/"</p>
<p>最终两个项目访问时地址为 www.xxx.com www.xxx.com/admin/</p>
<p> </p>
<p> </p>
<p><span style="color: rgba(255, 0, 0, 1)">然后保存 重启nginx</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">进入到nginx安装目录下的</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">bin/文件下 输入命令 ./nginx -t 检查配置文件 语法是否正确</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">然后 重新加载配置文件 ./nginx -s reload</span></p>
<p>即可</p>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
不忘初心<br><br>
来源：https://www.cnblogs.com/dzcici/p/13877338.html
頁:
[1]