Vue(Vite)项目构建时scripts目录JS文件未打包的解决方法

核心原因 #

Vite是基于ES模块的打包工具，只有被项目入口（比如main.js）或其他已引用模块直接/间接导入的文件，才会被纳入打包范围。你本地能正常使用，大概率是直接在index.html里用<script>标签引入了这个JS文件——Vite的开发服务器能处理这种方式，但生产构建时不会自动把这类未通过ES模块导入的文件打包进去。

具体解决方法 #

1. 改用ES模块导入（推荐）

把你的自定义JS文件通过ES import语法导入到项目的依赖链里：

• 如果是全局要用的函数，直接在main.js里导入：

  // src/main.js
  import './scripts/你的文件名.js' // 路径根据实际位置调整，比如scripts在src内就用相对路径
  import { createApp } from 'vue'
  import App from './App.vue'
  
  createApp(App).mount('#app')
  

• 如果只是某个组件需要用，就在对应组件里按需导入：

  // 比如src/components/YourComponent.vue
  import { 你的函数名 } from '../scripts/你的文件名.js'
  
  export default {
    setup() {
      // 直接使用导入的函数
      你的函数名()
    }
  }
  

2. 全局挂载函数（适用于需要全局调用的场景）

如果想在所有组件里不用每次导入就能调用函数，Vue3可以这么做：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as myScripts from './scripts/你的文件名.js'

const app = createApp(App)
// 挂载到全局属性
app.config.globalProperties.$myScripts = myScripts
app.mount('#app')

然后在组件里使用：

// Vue2选项式API或Vue3选项式API
this.$myScripts.你的函数名()

// Vue3组合式API（setup里）
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$myScripts.你的函数名()

3. 检查路径是否正确

确保导入路径是相对路径：

• 如果scripts文件夹和src文件夹同级（项目根目录下），导入路径应为import '../scripts/你的文件名.js'
• 如果scripts在src文件夹内，路径是import './scripts/你的文件名.js'

4. 特殊场景：单独打包JS文件（不推荐，仅适用于特殊需求）

如果你需要把这个JS文件单独打包成独立资源（比如第三方未模块化的库），可以在vite.config.js里配置：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        customScript: './scripts/你的文件名.js'
      }
    }
  }
}

构建后会生成customScript-xxx.js，你需要手动在index.html里引入这个打包后的文件。

内容的提问来源于stack exchange，提问作者S. Dre