Nginx 部署vue项目（Windows版）

小鱼儿 2024-04-08 09:12 85阅读 0赞

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

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

创建vue.config.js文件，设置前缀路径  
![在这里插入图片描述][b554d0767545405eafe65623abd2dd36.png]

### 2、打包 ###

打包命令

npm run build

![在这里插入图片描述][7e5d883dd2564f5fbedf13fc0935ba47.png]

显示这个目录，表示打包完成  
![在这里插入图片描述][d8f3acb29f9243ecb47a7c605603561a.png]

### 3、下载安装Nginx ###

地址：[nginx][]

下载后解压即安装  
![在这里插入图片描述][73f342a7ba3a4efeb04b58719d732054.png]

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

![在这里插入图片描述][96337ec562aa429493e868758a89fddc.png]

### 5、启动Nginx ###

双击即可  
![在这里插入图片描述][f0f72742ede14fbea6234e40206dab4f.png]

访问页面  
![在这里插入图片描述][99d9359b3bde46818965dda039520f91.png]

### 6、存在的问题 ###

刷新后报错，无法继续访问  
![在这里插入图片描述][c56aebb23ca6446d83e5e568aec54caf.png]

### 7、设置 ###

编辑nginx.conf文件  
![在这里插入图片描述][00d2836e80454fc68f0c37cf872ec2a2.png]

设置匹配规则

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

![在这里插入图片描述][afa24dc5a9974db79cf78e167ed39965.png]

### 8、重启Nginx ###

可直接在任务管理器结束任务 ，然后双击Nginx  
![在这里插入图片描述][98893c1c292d49a2a3f8dbfffd090600.png]

### 9、正常访问 ###

![在这里插入图片描述][bdae97a30b4441e58af00548221f4262.png]

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

##### 10.1、引入打包插件 #####

<build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>

##### 10.2、跳过测试 #####

![在这里插入图片描述][b5c1ef2881af4e1b922d1c8c60d3b115.png]

##### 10.3、打包 #####

![在这里插入图片描述][e0a247d055c9477db12bc6ba8bb9907b.png]

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

shift+右击  
![在这里插入图片描述][066d918c7b0d439a9fad6f0f590ae0cb.png]

##### 10.5、启动，有Redis的启动本地的Redis服务 #####

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

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

![在这里插入图片描述][0fdffeded1d044aa9d700e6ae9e8efd5.png]![在这里插入图片描述][acbc76d62e6943eb849b584837228270.png]

### 11、正常访问 ###

![在这里插入图片描述][85041fc268634adc947b5e9cbd6820fd.png]  
参考资料：https://www.zhuawaba.com/post/84

结束！！

--------------------

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

[b554d0767545405eafe65623abd2dd36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/158962f4352640c181a4295d927e6b0a.png
[7e5d883dd2564f5fbedf13fc0935ba47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/82349e0a6945485c82d85edfa1993c37.png
[d8f3acb29f9243ecb47a7c605603561a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c913e0ee9ad64a02ac4221a3ae9c179a.png
[nginx]: http://nginx.org/en/download.html
[73f342a7ba3a4efeb04b58719d732054.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/bb88e7b1b54646c78dabf02898110938.png
[96337ec562aa429493e868758a89fddc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/826260ecb8094a4ab6f07be782aaec0e.png
[f0f72742ede14fbea6234e40206dab4f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0a113bcc29e244d2ba108fca64c194d4.png
[99d9359b3bde46818965dda039520f91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3d946335b5d44888a03a7279f5e3d4c9.png
[c56aebb23ca6446d83e5e568aec54caf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/2b90748a96b5402cb7071c7e0d2370fe.png
[00d2836e80454fc68f0c37cf872ec2a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/fc6f7603545a434da3d8d9512d19ffb8.png
[afa24dc5a9974db79cf78e167ed39965.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/841c2120deb547efb0e73397f6d1fa66.png
[98893c1c292d49a2a3f8dbfffd090600.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/222aecb8987e41c88322b391cefadf65.png
[bdae97a30b4441e58af00548221f4262.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/7981519c3644452e9736cf902ef2c049.png
[b5c1ef2881af4e1b922d1c8c60d3b115.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a23cf21788c441c99b4307e6a40af307.png
[e0a247d055c9477db12bc6ba8bb9907b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9f408dbe9f1646a79623f3975f7e0ed0.png
[066d918c7b0d439a9fad6f0f590ae0cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a52e4aa1838a42cd94fc79b7bc293bc6.png
[0fdffeded1d044aa9d700e6ae9e8efd5.png]: https://img-blog.csdnimg.cn/0fdffeded1d044aa9d700e6ae9e8efd5.png
[acbc76d62e6943eb849b584837228270.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5cbf95a8cb1542ca9138fbf9db2a408d.png
[85041fc268634adc947b5e9cbd6820fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/6e08e47f33e84eae81f0c3f05dff37a2.png