Nginx 部署vue项目 (Windows版)

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

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

创建vue.config.js文件,设置前缀路径

2、打包

打包命令

npm run build

显示这个目录,表示打包完成

3、下载安装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

结束!!


人生,总要有要去追逐的东西。
经验分享 程序员 微信小程序 职场和发展