uni-app用vue3开发微信小程序时引用js文件报错

在使用uni-app结合Vue 3开发微信小程序时，如果遇到引用JS文件报错的问题，通常可能是由于路径错误、文件导出/导入语法不正确、或是编译配置问题导致的。以下是一些可能的解决方案和相关代码案例，帮助你排查和解决问题。

1. 检查文件路径

确保你引用的JS文件路径正确。uni-app支持相对路径和别名路径。

示例代码：

假设你的项目结构如下：

/pages
  /index
    index.vue
/common
  utils.js

在index.vue中引用utils.js：

<script setup>
import { someFunction } from '@/common/utils.js';

someFunction();
</script>

注意：@通常是在vue.config.js或pages.json中配置的别名，指向项目的src目录。

2. 检查导出/导入语法

确保你的JS文件使用正确的ES6模块语法进行导出和导入。

utils.js：

export function someFunction() {
  console.log('Function executed');
}

index.vue（同上）：

<script setup>
import { someFunction } from '@/common/utils.js';

someFunction();
</script>

3. 检查编译配置

确保uni-app的编译配置正确，特别是关于路径别名和文件解析的部分。

pages.json 或 vue.config.js（根据uni-app版本和配置习惯）：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^@/(.*)$": "src/$1"
    }
  }
}

或者在vue.config.js中配置路径别名（如果适用）：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src/')
      }
    }
  }
};

4. 清理和重建

有时候，简单的清理项目并重新构建可以解决缓存或编译状态不一致的问题。

# 清理dist目录（如果适用）
rm -rf dist

# 重新构建项目
npm run dev
# 或者
npm run build

总结

通过上述步骤，你应该能够定位并解决在uni-app中使用Vue 3开发微信小程序时遇到的JS文件引用报错问题。如果问题依旧存在，建议检查控制台或编译器的具体错误信息，以获取更详细的错误提示。