Vite.js如何原样加载JS文件 不做转换、压缩与依赖注入

Vite原生支持JS文件的无转换透传加载，完全可以做到不做压缩、不做语法转换、不自动注入CommonJS辅助函数依赖，最终运行效果和原生<script>标签引入完全一致，有两种成熟实现路径：

方案1：public目录存放（零配置，最简便） #

Vite默认对项目根目录下public文件夹内的所有资源做完全透传处理：开发环境直接作为静态文件响应请求，生产构建时原封不动复制到产物目录，全程不会对文件内容做任何修改。

• 把需要原样加载的JS文件直接放进public目录即可，不需要写任何配置。
• 可以直接在HTML里写原生script标签引入，比如文件路径为public/raw.js，引入代码：

<script src="/raw.js"></script>

• 需要动态加载的话，直接拼接项目基础路径创建script标签就行：

const script = document.createElement('script')
script.src = `${import.meta.env.BASE_URL}raw.js`
script.async = false
document.body.appendChild(script)

方案2：源码目录内指定文件透传加载 #

如果不想把文件挪到public目录，要保留在src等业务代码目录，加几行配置就能实现指定JS文件的原样加载：

1. 编辑vite.config.js，把带特殊标记的JS文件归类为静态资源，跳过JS模块转换流程：

import { defineConfig } from 'vite'

export default defineConfig({
  // 识别带?raw-js后缀的请求为静态资源，不走JS模块解析逻辑
  assetsInclude: [/\?raw-js$/],
  build: {
    rollupOptions: {
      output: {
        // 这类资源输出时保留原文件名，不自动加hash（可按需调整）
        assetFileNames: (assetInfo) => {
          if (assetInfo.name?.endsWith('?raw-js')) {
            return 'assets/[name][extname]'
          }
          return 'assets/[name]-[hash][extname]'
        }
      }
    }
  }
})

2. 引入目标JS文件时加上?raw-js后缀，拿到资源的公网访问路径后动态插入页面即可，整个过程不会修改源文件内容：

import scriptUrl from './src/legacy/old-script.js?raw-js'

const script = document.createElement('script')
script.src = scriptUrl
document.body.appendChild(script)

注意：不要用普通ES模块导入语法直接引入需要原样加载的JS文件，只要走默认的JS模块解析链路，Vite就会自动做语法转译、依赖分析注入、代码压缩处理，只有将文件作为静态资源处理、或放入public目录走静态服务逻辑，才能保证加载的文件和本地源文件完全一致。

内容的提问来源于stack exchange，提问作者Vitaly Emelyanov