Vue项目中home未定义及import语句报错的技术咨询

1. home未定义的根本原因 #

你的HTML脚本加载顺序是app.js先于home.js、department.js、employee.js。当app.js执行时，home等组件变量还未被定义，自然会抛出“未定义”错误。

2. 关于import语句的问题 #

你用import {home} from "home.js"的方式不适合当前项目结构：浏览器默认将普通<script>标签视为非ES模块，不允许在其中使用import语法，这就是“Cannot use import statement outside a module”错误的来源。这种引用方式在当前场景下完全没必要。

3. 解决方案 #

方案一：调整脚本加载顺序（最简方案） #

将app.js移到所有组件脚本之后加载，确保app.js运行时，home等变量已存在：

<script src="variables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>   
<!-- 先加载组件脚本 -->
<script src="home.js"></script>
<script src="department.js"></script>
<script src="employee.js"></script>
<!-- 最后加载app.js -->
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

方案二：改用ES模块规范（适合长期维护的项目） #

如果想使用import语法，需要做以下修改：

1. 修改组件脚本的导出方式，以home.js为例：

// home.js
export const home = { template: `<h1>This home</h1>` }

2. 在app.js中导入组件并调整Vue初始化代码：

// app.js
import { home } from './home.js';
import { department } from './department.js';
import { employee } from './employee.js';

const routes = [
    {path:'/home',component:home},
    {path:'/employee',component:employee},
    {path:'/department',component:department}
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

Vue.createApp({}).use(router).mount('#app')

3. 修改HTML中的脚本标签，添加type="module"属性：

<!-- 仅需引入app.js，组件会通过import自动加载 -->
<script type="module" src="app.js"></script>

注意：这种方式需要用本地服务器（如http-server）运行项目，直接打开HTML文件会触发跨域错误。

总结 #

优先选择方案一，无需修改代码逻辑，仅调整加载顺序就能快速解决home未定义问题。import错误是因为当前项目未启用ES模块环境导致的，完全不需要优先解决——改用方案一可直接规避该问题。

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