1.编译打包

代码编写完毕后,在终端输入

vue ui

image-20211110223305215

随后就会在项目中生成dist文件夹

image-20211110223545131

有的项目经过一些配置后,结构有所不同,但没有影响。

image-20211110223652966

2.准备部署

将dist文件夹中的所有内容(不包括dist文件夹)全部移动到相应位置。

而部署的方式有两种,我们重点介绍第二种。

2.1.跟随SpringBoot项目一同部署

如果后端为SpringBoot项目,希望与后端一并运行,

此时在resources目录中创建static文件夹,将dist文件夹中的所有内容复制过去

image-20211110224123940

随后编译成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

image-20211110225437242

在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)

image-20211110225917473

将dist文件夹中的所有内容移动到其中

image-20211110230034204

2.2.4.启动/重启nginx以开启项目

先进入到nginx安装目录下的sbin目录中:

cd /usr/local/nginx/sbin

随后输入下方指令启动/重启nginx(注:输入后不会有任何反馈)

# 启动nginx
./nginx

# 重启nginx
./nginx -s reload

image-20211106033916986

2.2.5.服务器配置安全组(防火墙)

如果是阿里云服务器,则需要配置安全组;如果是腾讯云,则是配置防火墙。开放前端项目对应的端口,并允许所有人访问。

详情请移步01.服务器购买与基本配置

2.2.6.访问

一切准备就绪后,在浏览器输入http://服务器ip:端口号,即可访问到你的前端项目

image-20211110231005260

Logo

更多推荐