记一次成功的nginx部署vue

#vue #nginx

跟上时代，用宝塔第一次部署vue项目。

打开宝塔，点击【网站】，点击【添加站点】，选择【传统网站】，输入域名，根目录下会自动追加域名对应的目录，点击确定创建
点击【软件商店】安装nginx，如果没有的话，点击软件名称nginx，选择【配置文件】，编辑配置文件，贴一下全部，供参考（启用了ssl证书的写法）

user  www www;
worker_processes auto;
error_log  /www/wwwlogs/nginx_error.log  crit;
pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;

stream {
    log_format tcp_format '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time';

    access_log /www/wwwlogs/tcp-access.log tcp_format;
    error_log /www/wwwlogs/tcp-error.log;
    include /www/server/panel/vhost/nginx/tcp/*.conf;
}

events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }

http
    {
        include       mime.types;
        #include luawaf.conf;

        include proxy.conf;
        lua_package_path "/www/server/nginx/lib/lua/?.lua;;";

        default_type  application/octet-stream;

        server_names_hash_bucket_size 512;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;

        sendfile   on;
        tcp_nopush on;

        keepalive_timeout 60;

        tcp_nodelay on;

        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;
        fastcgi_intercept_errors on;

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/json image/jpeg image/gif image/png font/ttf font/otf image/svg+xml application/xml+rss text/x-js;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

        limit_conn_zone $binary_remote_addr zone=perip:10m;
        limit_conn_zone $server_name zone=perserver:10m;

        server_tokens off;
        access_log off;

server
    {
        listen 443 ssl http2;
        server_name 域名;
        ssl_certificate    /www/server/panel/vhost/cert/域名/fullchain.pem;
        ssl_certificate_key    /www/server/panel/vhost/cert/域名/privkey.pem;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;
        ssl_session_cache shared:SSL:10m;
        ssl_session_timeout 10m;

        root  /www/wwwroot/域名;
        index index.html index.htm;
        location / {

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

         # 静态资源缓存
        location /assets {
            expires 7d;
            add_header Cache-Control "public, no-transform";
        }
        #error_page   404   /404.html;
        # include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }
        location /api {
            proxy_pass https://xx/api;  # 后端API地址
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # 跨域配置
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers '*';
            add_header Access-Control-Expose-Headers '*';

            if ($request_method = 'OPTIONS') {
                return 204;
            }
        }
        access_log  /www/wwwlogs/access.log;
    }
# HTTP重定向HTTPS
server {
    listen 80;
    server_name 域名/;
    return 301 https://$server_name$request_uri;
}

include /www/server/panel/vhost/nginx/*.conf;
}

接下来部署vue（vue3）配置vite

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/' : './',
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  // 关闭生成map文件
  sourcemap: false,
  // 打包输出目录
  outDir: 'dist',
  server: {
    port: 3000,
    host: '0.0.0.0',
    open: true,
    proxy: {
      '/aicon': {
        target: 'https://xx/',
        // target: 'http://localhost:8000',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/aicon/, '')
      }
    }
  }
})

然后确认路由模式，官方的解释https://router.vuejs.org/guide/essentials/history-mode
文件在router下的index.js，网路上说配置不配置成hash模式要在nginx中增加location，大概是这样

# 支持history路由模式
        location /xx {
            try_files $uri $uri/ /index.html;
        }

但是我没有配置也成功了，尚且不知道为什么
最后打包部署

npm run build:prod

发布vue
回到宝塔，选择【文件】，在域名目录下点击【上传文件】，将上一部build产生的dist目录下所有文件拖动上传。切记应该是所有文件在域名目录下，而不是dist目录，否则nginx就要更改配置。
完成部署
回到nginx，重载配置，重启，就完成了，使用https访问域名，这种配置可以解决刷新页面404和白屏的问题

DEV Community

记一次成功的nginx部署vue

Top comments (0)