Nginx Ubuntu 下部署 vue 单页面应用实践

一、在 Ubuntu 上安装 Nginx

sudo apt-get update

sudo apt install curl gnupg2 ca-certificates lsb-release

echo "deb http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" \
    | sudo tee /etc/apt/sources.list.d/nginx.list

curl -fsSL https://nginx.org/keys/nginx_signing.key | sudo apt-key add -

sudo apt-key fingerprint ABF5BD827BD9BF62

sudo apt install nginx

// 启动 nginx 
service nginx restart // service nginx reload

至此，访问域名应该可以看到 nginx 的欢迎页了。

image.png

二、配置 nginx 的 nginx.conf，主配置文件的路径为：/etc/nginx/nginx.conf

vim /etc/nginx/nginx.conf

查看该文件包含了两个文件目录：

image.png

实际的配置文件是 /etc/nginx/sites-enabled/default
现在需要修改该文件的server节点：
修改前：

image.png

修改后：

server {
        listen 80;
        listen [::]:80;

        server_name qzsjfc.xyz; # 这里是网站的域名

        root /var/www/qzsjfc.xyz; # /vue/dist/ 打包后的dist目录

        location / {
                try_files $uri $uri/ @router; # 指向下面的 @router否则会出现 404
                index index.html index.htm;
        }

        # 对应上面的 @router,主要Vue请求并不是真实路径，无法找到文件，需要重定向到 index.html 中，然后交给路由处理
        location @router {
                rewrite ^.*$ /index.html last;
        }
}

重新加载 nginx 配置文件：

nginx -s reload

这是在访问时报错，说明生效了：

image.png

三、编译vue并上传到 /var/www/qzsjfc.xyz 目录

npm run build

image.png

编译后的 dist 目录：

image.png

上传之后，就可以访问了。
四、解决跨域问题。
Vue 开发时，设置了 proxyTable 解决跨域访问后台的问题。

image.png

当部署到 nginx 后，需要重新配置代理，将请求转发到 tomcat 上。

location /api/ {
    proxy_pass http://localhost:8080/; # 代理接口的地址，配置后请求会自动转发到 http://localhost:8080/api/ 上
}