Vue项目打包部署教程（Nginx）

最新推荐文章于 2024-08-11 13:18:04 发布

我服了这代码我真看不懂

最新推荐文章于 2024-08-11 13:18:04 发布

阅读量2.5k

点赞数

分类专栏： Vue Nginx 文章标签： nginx vue linux

本文链接：https://blog.csdn.net/x1339874968/article/details/121534615

版权

本文详细介绍了如何将Vue项目进行打包，并通过Nginx在Linux环境中进行部署，包括修改vue.config.js，使用npm run build命令生成dist文件夹，Nginx的安装，配置及最后的访问验证步骤。

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

一、项目打包

1.修改config.js(没有该目录则在根目录下手动创建vue.config.js)

module.exports = {
    publicPath: '/',
    devServer:{
        port:80, // 启动端口
        open:true  // 启动后是否自动打开网页
    }
}

2.命令行输入npm run build ，生成项目文件夹dist

二、Nginx安装

1.在/usr/local/下创建文件nginx文件
mkdir /usr/local/nginx

2.下载nginx包
sudo wget http://nginx.org/download/nginx-1.18.0.tar.gz
sudo tar -xvf nginx-1.18.0.tar.gz

3、进入nginx目录
cd /usr/local/nginx-1.18.0

4.安装
sudo ./configure
sudo make
sudo make install

三、配置

1.进入目录:/www/server/nginx/conf/nginx.conf
server {
        listen 80;
        server_name localhost;


        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        root html;
        }


        root /www/server/nginx/html/dist;
        index index.html;


        location / {
        try_files $uri $uri/ /index.html last;
        index index.html;
        }


        location @router {
        rewrite ^.*$ /index.html last;
        }
}
2.重载配置
nginx -s reload