【前端部署】多个vue项目部署到Linux服务器
【前端部署】多个vue项目部署到Linux服务器
文章目录
前端部署
前端部署
前端部署
- 二、修改nginx配置
- 三、重启nginx
- 总结
前言
借助nginx技术对两个vue项目的整合部署工作展开，在现有服务器环境基础上实现了多项目的高效配置。本次部署是在已部署的单个vue项目基础上进行优化，并将两个项目配置在同一端口位置。如需单独部署一个vue项目，请参考以下链接：
前端部署
前端部署
前端部署
一、修改vue项目中配置
1.修改vue.config.js
启动Visual Studio Code后，在窗口菜单栏中找到选项设置，在高级选项中找到开发环境设置项。然后点击该窗口的选项设置（或直接输入快捷键Win + R调出Run命令），运行命令 dot net add package.visualstudio.workingdir. 完成上述操作后，在Visual Studio Code中创建新的Python项目，并在其中新建一个名为 project1 的Python工程。接着在工作区中新建一个名为 data 的目录，并在此目录下新建一个名为 test.txt 的文本文件，并将其中的内容修改为 Hello, World!.
module.exports = {
publicPath: "/test/",
devServer:{
host:"localhost",
port:'8080',
https:false,
hotOnly:false,
proxy:{
"server":{
target:"http://localhost:8080",
ws:true,
changeOrigin:true,
pathRewrite:{
'^/server':''
}
}
}
}
}2.修改router文件下的index.js
在项目的 Vue 应用目录下定位到 router 文件夹位置；点击打开位于该目录下的 index.js 文件；设置 base 值为指定值；具体代码如下：
export default new VueRouter({
mode: 'history',//打包会出现问题
base: '/test/', //这里也可以改为 base: process.env.BASE_URL,
routes: [
]
})3.打包项目
前端部署
前端部署
这里需要注意的是，在同一文件路径下放置两个项目的dist文件夹时，请注意以下几点：首先可以选择地将所有项目的目标dist目录配置为同一个路径；其次，在命名时，请确保每个项目都有唯一的名称以避免冲突；最后，在实际操作中，请按照以下步骤进行：第一步是确认目标路径；第二步是分别复制两个项目的dist目录到该路径下；第三步是对每个项目进行重命名操作。
二、修改nginx配置
启动服务器，并将配置文件定位到/usr/local/nginx/conf/nginx.conf路径后执行打开操作。
在此基础上，请配置第二个项目的location设置，并注意在路径上指定为location /test
#第二个项目
location /test {
alias /home/vue/test;
index index.html index.htm;
try_files $uri $uri/ @router;
}"/home/vue/dist"和"/home/vue/test"分别表示两个vue项目文件夹的路径位置，在服务器配置中，默认配置文件位于$dist目录下。
user root;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8080;
server_name localhost;
access_log logs/host.access.log;
error_log logs/error_log;
#第一个项目
location / {
root /home/vue/dist;
index index.html index.htm;
try_files $uri $uri/ @router;
}
#第二个项目
location /test {
alias /home/vue/test;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}三、重启nginx
打开终端，进入nginx的安装目录，我这里是/usr/local/nginx/sbin
cd /usr/local/nginx/sbin先停止nginx服务
./nginx -s stop检查nginx配置是否正确
./nginx -t启动nginx服务
./nginx或者重启nginx服务
./nginx -s reload查看nginx状态
ps aux | grep nginx当Nginx正常启动之后，在服务器上运行的浏览器中打开http://localhost:8080/test即可进入第二个Vue项目的界面；同样地，在其他设备上访问该IP地址对应的URL也会引导至该界面。
总结
本文主要是在同一台服务器上部署多个vue项目；同样可以在不同服务器之间配置不同的vue项目布局。欢迎指正存在的问题