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

一、项目打包

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

四、验证

访问ip地址监听的端口