vite和vue3 中的vite.config.js配置build后引入静态文件为相对路径

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/, '')
      }
    }
  }
});
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值