Vue

Vite 抱錯的原因

原因 Internal server error: Failed to resolve import’＠/‘’ Does the file exist?

1
2
3
4
5
6
7
8
9
Are they installed?
Failed to resolve import "@/views/Home.vue" from "src/router/index.ts". Does the file exist?
上午8:48:58 [vite] Internal server error: Failed to resolve import "@/views/Home.vue" from "src/router/index.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/larahuang/Desktop/作品集/員工打卡系統/CheckInSystem/src/router/index.ts:7:36
  4  |      path: "/",
  5  |      name: "Home",
  6  |      component: () => import("@/views/Home.vue")
     |                              ^
#修改vite.config.ts配置 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url';//加入
import { resolve } from 'path';//加入

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //加入
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: '/',
  //用於環境變數
  envDir: resolve(__dirname, './env'),
})

處理錯誤：修改vite.config.ts配置與安裝 @types/node

1
npm install --save-dev @types/node

錯誤訊息Vetur(2792) & ts(6133) & ts(6192)

tsconfig.json 修改以下
Vetur(2792)=>moduleResolution 為node

ts(6133) & ts(6192)=>noUnusedLocals改為false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* 錯誤訊息Vetur(2792)*/
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    /* 錯誤訊息ts(6133)*/
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

錯誤訊息Vetur(2792) & ts(6133) github

錯誤訊息Vetur(1192)

VsCode 卸載vetur 安裝volar

錯誤訊息:找不到模組 ‘virtual:generated-layouts’ 或其對應的型別宣告。ts(2307)

錯誤訊息:找不到模組 'virtual:generated-layouts' 或其對應的型別宣告。ts(2307)

處理方式:tsconfig.json檔案內compilerOptions加入以下
1
2
3
4
"types": [
  "vite-plugin-pages/client",
  "vite-plugin-vue-layouts/client"
]

Cannot find module ‘@/stores/cart’ or its corresponding type declarations.Vetur(2307)

處理方式:tsconfig.json檔案內compilerOptions修改以下
"target": "ESNext", 
1
2
3
"compilerOptions": {
   "target": "ESNext",
}

錯誤訊息 Vetur2339

處理方式
  • 設定
  • 搜尋 validation:interpolation

錯誤訊息 Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

棄用警告：Sass @import 規則已棄用，將在 Dart Sass 3.0.0 中刪除。

處理方式

1
@use "./public.scss";

參考資料

錯誤訊息 Vue3 找不到 ‘element-plus’ Ts2307

處理方式
vite-env.d.ts 加入

1
declare module 'element-plus'

參考資料

vue3中引入组件提示Module ‘“XXXXX/index.vue“‘ has no default export.

處理方式
點選Vs Code 右下角設置按鈕，

1
vetur.validation.script
參考資料

錯誤訊息 Vue3 找不到 ‘element-plus’ 不得使用命名空間 ‘FormInstance’ 作為類型。ts(2709)

處理方式

1
2
3
4
5
<script setup lang="ts">
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

    const ruleFormRef = ref<InstanceType<typeof FormInstance>>()
</script>
1
2
3
4
5
6
7
<script setup lang="ts">
import type { ElForm } from 'element-plus'
type FormInstance =InstanceType<typeof ElForm>
type FormRules =InstanceType<typeof ElForm>

    const ruleFormRef = ref<FormInstance>()
</script>

參考資料

Neither WebCryptoAPI nor a crypto module is available. Use bcrypt.

setRandomFallback to set an alternative
WebCryptoAPI 和加密模組皆不可用。使用 bcrypt.setRandomFallback 設定替代方案

修改方式：npm install bcryptjs@2.4.3