注:项目在本地正常运行后再打包部署。

1、设置项目的一个访问前缀

创建vue.config.js文件,设置前缀路径
在这里插入图片描述

2、打包

打包命令

npm run build

在这里插入图片描述

显示这个目录,表示打包完成
在这里插入图片描述

3、下载安装Nginx

地址:nginx

下载后解压即安装
在这里插入图片描述

4、将打包后的dist目录下的所有文件放在Nginx的html目录下

在这里插入图片描述

5、启动Nginx

双击即可
在这里插入图片描述

访问页面
在这里插入图片描述

6、存在的问题

刷新后报错,无法继续访问
在这里插入图片描述

7、设置

编辑nginx.conf文件
在这里插入图片描述

设置匹配规则

try_files $uri $uri/ /index.html last;

在这里插入图片描述

8、重启Nginx

可直接在任务管理器结束任务 ,然后双击Nginx
在这里插入图片描述

9、正常访问

在这里插入图片描述

10、springboot后端项目在本地部署

10.1、引入打包插件
 <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
10.2、跳过测试

在这里插入图片描述

10.3、打包

在这里插入图片描述

10.4、在当前目录下打开窗口

shift+右击
在这里插入图片描述

10.5、启动,有Redis的启动本地的Redis服务

由于有两个有关路径的yml文件,所以启动指定的

java -jar vueblog-0.0.1-SNAPSHOT.jar --spring.profiles.active=default

在这里插入图片描述在这里插入图片描述

11、正常访问

在这里插入图片描述
参考资料:https://www.zhuawaba.com/post/84

结束!!


											人生,总要有要去追逐的东西。
Logo

前往低代码交流专区

更多推荐