The vite.config.js configuration build in vite and vue3 introduces static files as relative paths

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

export default defineConfig({
    
    
  plugins: [vue()],
  base: './', // 设置基础路径为根目录
  build: {
    
    
    outDir: './dist', // 指定输出目录为 "./dist"
    assetsDir: './assets', // 指定静态文件引入路径为 "./assets"    
    sourcemap: false, // 不生成 sourceMap 文件
    minify: 'terser', // 使用 terser 进行代码压缩
    chunkSizeWarningLimit: 2000, // 设置 chunk 大小警告的限制为 2000 KiB
    chunkSizeLimit: 5000, // 设置 chunk 大小的限制为 5000 KiB
    emptyOutDir: true, // 在构建之前清空输出目录
    rollupOptions: {
    
    
      output: {
    
            
        // 在这里修改静态资源路径
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',        
        manualChunks(id) {
    
    
          // Vue 及其相关库的 chunk
          if (id.includes('vue') || id.includes('core-js') || id.includes('@babel/runtime')) {
    
    
            return 'vendor';
          }
          // 其他库的 chunk
          if (id.includes('node_modules')) {
    
    
            return 'dependencies';
          }
          // 默认情况下将模块放入一个单独的 chunk
          return 'common';
        }
      }
    }
  },
  optimizeDeps: {
    
    
    include: ['axios'],
    force: true // 强制进行依赖预构建
  },
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, './src') // 路径别名
    },
    extensions: ['.js', '.ts', '.json'] // 导入时想要省略的扩展名列表
  },
  server:{
    
    
    host: true, // 监听所有地址
    cors: true,
    open: true,
    proxy: {
    
    
      '/apis': {
    
    
          target: 'http://127.0.0.1:3010',   //代理接口
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/apis/, '')
      }
    }
  }
});

Guess you like

Origin blog.csdn.net/lizhihua0625/article/details/132489860
Recommended