vue3+vite 包中使用useRoute()报错

### 解决方案 在 Vue 3 使用 Vite 和 TypeScript 的项目中遇到 CSS `@import` 报错的情况通常是因为缺少必要的配置或插件支持。以下是详细的解决方案： #### 配置 Vite 支持 CSS Modules 或其他预处理器 为了使 `@import` 正常工作，可以在 `vite.config.ts` 中添加对 CSS 处理的支持。如果使用的是 LESS、SASS 等预处理语言，则需安装相应的加载器。 ```typescript // vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ plugins: [ vue(), // 如果需要额外的插件可以在这里加入 ], css: { preprocessorOptions: { less: { additionalData: `@import "@/styles/variables.less";`, // 自定义路径导入全局变量或其他样式文件 } } }, resolve: { alias: { '@': path.resolve(__dirname, 'src') } } }) ``` 此设置允许开发者指定要自动引入到每一个 `.less` 文件中的公共样式表[^2]。 #### 修改 tsconfig.json 设置编译选项 确保项目的 `tsconfig.json` 已经正确设置了模块解析方式和其他必要参数: ```json { "compilerOptions": { ... "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } } ``` 这有助于 TypeScript 更好地理解相对路径和别名映射关系[^1]。 #### 更新 main.ts 加载应用实例 确认入口文件已经按照标准流程初始化了应用程序并挂载到了 DOM 节点上： ```typescript // main.ts import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router).mount('#app'); ``` 以上步骤能够帮助解决大多数情况下由于配置不当引起的 `@import` 错误问题。