前后端分离架构部署到linux上

最新推荐文章于 2024-10-12 10:25:59 发布

huguang0809

最新推荐文章于 2024-10-12 10:25:59 发布

阅读量695

点赞数 1

文章标签： Vue 后端打包 nginx部署前端配置错误排查

本文链接：https://blog.csdn.net/huguang0809/article/details/117084454

版权

3.2.1、修改vue.config.js文件

3.2.2、修改src/router/index.js文件

3.2.3、修改src/layout/components/Navvar.vue文件

5.2、打开主页提示“登录状态已过期，您可以继续留在该页面，或者重新登录”，检查代码是401错误

1、感谢

首先在这里感谢若依前后端分离框架的作者们提供了前后端分离开发框架。

2、后端打包部署

2.1、打包

后端开发自测完成后，修改父工程中的pom文件中maven-compiler-plugin的版本，由于框架自带的3.1版本我这边编译器打包失败，所以我改成了我通常用于打包的版本3.8.0

<build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.0</version>
                <configuration>
                    <source>${java.version}</source>
                    <target>${java.version}</target>
                    <encoding>${project.build.sourceEncoding}</encoding>
                </configuration>
            </plugin>
        </plugins>
    </build>

修改后即可通过编译器进行打包，这里只打jar包。可以先清理一下，再打包。

打包成功之后，可以看到admin子工程下有了admin.jar文件。

2.2、部署

直接上送到linux服务器上，编写一个启动脚本。（linux服务器环境配置这里不讲）

部署成功之后给启动脚本赋权并启动后端程序。

3、VUE前端打包部署

3.1、打包配置

我这里直接用编译器进行打包了，和用命令打包一样。在编译器中配置打包命令。

3.2、程序配置

为了方便部署多个前端，在打包之前配置一下访问标识。

3.2.1、修改vue.config.js文件

修改publicPath: process.env.NODE_ENV参数，把“/”改为自己定义的访问标识。

3.2.2、修改src/router/index.js文件

增加base配置，base内容和vue.config.js中的访问标识保持一致。

3.2.3、修改src/layout/components/Navvar.vue文件

在location.href参数值前加上 this.$router.options.base

3.3、打包

选择配置好的打包命令点击run按钮。

等待一下即可打包成功。

打包成功之后，你会发现你的工程目录下多了一个dist文件夹，这里面就是你要部署的文件。

3.4、部署

前面的过程都很顺利，由于没有搞过vue的部署，这里遇到了很多问题，好在最后查找资料解决了。感谢同行们的奉献，所以我也把自己部署的整个过程共享出来。

3.4.1、部署到nginx

我这里选择部署到nginx上，没有去部署到tomcat中运行。

首先找到nginx的安装路径，自行百度吧。一般为/usr/local/nginx

在html文件夹下新建一个你项目的目录，最好和你的访问标识一致吧。

然后将dist文件夹中的内容都传到这个新建的文件夹下。

前端程序部署完成。

3.4.2、nginx配置

修改nginx的配置文件，在nginx安装路径的conf文件夹下nginx.conf文件

使用vi命令修改： vi nginx.conf

光标移动到server中，修改location配置

server {
    listen       80;
    # server_name  localhost;
	server_name  本机IP;	
	# root html;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location /访问标识/ {
	    root html;
	    try_files $uri $uri/ /访问标识/index.html;
	}

	location /prod-api/ {
        proxy_pass http://后端应用部署的服务器IP:后端应用端口/;
    }

    ...
}

修改完成之后输入保存命令：:wq!

重启nginx服务。

进入sbin目录，

停止：./nginx -s stop

检查nginx状态：netstat -anp | grep 80

启动：./nginx

恭喜你，已经完成了前后端部署。