Nginx部署vue项目

m0_67391683

于 2022-08-02 04:08:54 发布

阅读量9.1k

点赞数 1

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67391683/article/details/126113743

版权

本文详细介绍了如何使用Nginx部署Vue项目。首先通过`npm run build`打包项目，生成dist文件夹。接着配置Nginx，将dist文件夹内容放入nginx的html文件夹。然后启动Nginx，通过不同命令实现启动、停止和重启操作。作者为有多年开发经验的工程师，分享了个人的学习和工作经验。

摘要由CSDN通过智能技术生成

步骤一：项目打包

打开vscode终端
在终端输入

npm run build

这时可以看到生成dist文件夹，我们要放在服务器上的文件就在这，
步骤二：配置nginx
找到在官网下载的安装包。
稳定版windows，就是下载这个
找到下载的安装包的地方， ginx-1.20.2conf中nginx的配置文件nginx.conf文件。

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  aaa.abc.com;
        location / {
            root   html;
            index  index.html index.htm;
        } 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;