vite + nginx + 后端的部署配置

vite + nginx + 后端配置

// vite配置:主要解决assets内文件名hash后找不到的问题

// 引用assets文件 一定要这样引用才能被vite自动转换
const localResSrc = ((param: string): string => {
    return new URL(`../assets/images/${param}`, import.meta.url).href
})

// vite.config.ts
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  return {
    // 最主要还是这个配置
    base: env.VITE_MODE === 'production' ? './' : '/',
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    css: {
      preprocessorOptions: {
        scss: {
          charset: false,
          additionalData: '@import "./src/assets/css/variables.scss";@import "./src/assets/css/mixin.scss";'
        }
      }
    }
  }
})

// nginx配置
// 实际使用过程中，如果绑定自定义端口无效，可通过设置防火墙开放端口尝试解决。
// 访问使用 www.xx.com:8011
// 以下配置中 web为前端根目录 webserver为后端根目录

server {
        listen       8011; # 绑定端口
        server_name  www.xxx.com xxx.com; #绑定域名

        #charset koi8-r;
        
        # log存放位置

        access_log  logs/server.access.log;
        error_log logs/server.error.log;
        
        # 匹配到res路径的静态资源
        location ^~ /res {
            access_log off;
            expires    1d;
            # 静态资源根目录
            root       www/webserver;
            try_files  $uri @backend;
        }
        
        # 同上 这里是因为项目还有个资源目录所以添加 一般一个就够了吧
        location ^~ /js {
            access_log off;
            expires    1d;
            # 静态资源根目录
            root       www/webserver;
            try_files  $uri @backend;
        }
        
        # 匹配到api路径 即为api请求时 交给后端处理
        location ^~ /api {
            try_files  $uri @backend;
        }
        
        location / {
            # 前端项目根路径
            root www/web;
            # 入口文件
            index index.html index.htm;
            # 解决前端路由刷新失效问题 找不到就去index.html
            try_files $uri $uri/ /index.html;
        }
        
        # goframe 后端代理配置 请求转发
        location @backend {
            proxy_pass                 http://127.0.0.1:8000;

            proxy_redirect             off;
            proxy_set_header           Host             $host;
            proxy_set_header           X-Real-IP        $remote_addr;
            proxy_set_header           X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
    }