记一次成功的nginx部署vue

[Lomanu4]

跟上时代，用宝塔第一次部署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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

# 后端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'

//

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

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: '

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

',
// target: '

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/aicon/, '')
}
}
}
})

然后确认路由模式，官方的解释

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

文件在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和白屏的问题
  

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.