- 1.编译打包
- 2.准备部署
- 2.1.跟随SpringBoot项目一同部署
- 2.2.在nginx上部署
- 2.2.1.安装nginx
- 2.2.2.修改配置文件
- 2.2.3.将项目移动到root对应的文件夹
- 2.2.4.启动/重启nginx以开启项目
- 2.2.5.服务器配置安全组(防火墙)
- 2.2.6.访问
代码编写完毕后,在终端输入
vue ui
随后就会在项目中生成dist文件夹
有的项目经过一些配置后,结构有所不同,但没有影响。
2.准备部署将dist文件夹中的所有内容(不包括dist文件夹)全部移动到相应位置。
而部署的方式有两种,我们重点介绍第二种。
2.1.跟随SpringBoot项目一同部署如果后端为SpringBoot项目,希望与后端一并运行,
此时在resources目录中创建static文件夹,将dist文件夹中的所有内容复制过去
随后编译成jar包即可,详情请移步05.SpringBoot项目部署到linux服务器
注意:如果pom.xml修改了中的,需要检查是否有将resources文件夹加入其中。如果不在其中,MAVEN打包时就不会将resources文件夹打包进去,自然前端也就没有办法被编译进jar包了。
2.2.在nginx上部署 2.2.1.安装nginx如果尚未在linux服务器上安装nginx,请移步07.linux服务器安装nginx
我的nginx安装目录是/usr/local/nginx。
2.2.2.修改配置文件首先进入安装目录下的conf文件夹,打开nginx.conf
在http { }中,加入下方内容,并修改其中的listen、server_name、root
server { listen 8080; # 前端项目端口号 server_name name; # 前端项目名 #charset koi8-r; #access_log logs/host.access.log main; location / { root /vue-2021/name/; # 前端项目所在位置 index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ .php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ .php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param script_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /.ht { # deny all; #} }2.2.3.将项目移动到root对应的文件夹
创建root对应的文件夹(如上,我的是/Vue-2021/name)
将dist文件夹中的所有内容移动到其中
2.2.4.启动/重启nginx以开启项目先进入到nginx安装目录下的sbin目录中:
cd /usr/local/nginx/sbin
随后输入下方指令启动/重启nginx(注:输入后不会有任何反馈)
# 启动nginx ./nginx # 重启nginx ./nginx -s reload2.2.5.服务器配置安全组(防火墙)
如果是阿里云服务器,则需要配置安全组;如果是腾讯云,则是配置防火墙。开放前端项目对应的端口,并允许所有人访问。
详情请移步01.服务器购买与基本配置
2.2.6.访问一切准备就绪后,在浏览器输入http://服务器ip:端口号,即可访问到你的前端项目
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)