Vite是一種新型前端構建工具何之，能夠顯著提升前端開發(fā)體驗缨睡。
------------------------開發(fā)------------------------------
1公荧、快速創(chuàng)建vue3+ts的項目
npm init vite@latest vue3-project-demo --template vue-ts
2年堆、引入sass
npm add -D sass
3丹墨、設置環(huán)境變量
1恼除、創(chuàng)建.env環(huán)境變量文件，見vite文檔
2植捎、在環(huán)境變量文件中定義的變量衙解，可以在 env.d.ts 增加智能提示
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_APP_TITLE: string
// 更多環(huán)境變量...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
3、設置多環(huán)境運行：
"scripts": {
"dev": "vite serve --mode development",
"test": "vite serve --mode uat",
"build:dev": "vite build --mode development",
"build:test": "vite build --mode uat",
"build:prod": "vite build --mode production",
...
}
------------------------問題------------------------------
1焰枢、項目創(chuàng)建成功后蚓峦，使用命令npm run dev看到終端顯示，Network沒有顯示局域網ip
vite v2.9.13 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 291ms.
根據網上查詢的資料济锄，有以下幾種解決方法：
- 通過修改vite.config.ts 方法解決
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: '0.0.0.0' // 添加server暑椰，設置host
}
})
- 通過Vite CLI配置
執(zhí)行npx vite --host 0.0.0.0命令后，就可以通過局域網ip訪問了 - 修改npm腳本
在根目錄下package.json 文件中修改scriptes節(jié)點下的腳本：
"scripts": {
"dev": "vite --host 0.0.0.0", // 在此添加host
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
....
....
}
修改上面任何一種配置荐绝，可解決network 為空的問題一汽。
2、項目中引入組件HelloWorld有一個紅色波浪號提示
截屏2022-07-05 下午5.33.01.png
造成的原因：
因為vue3不支持vutur
解決方案：
方案1：在vscode 中搜索vetur插件低滩，禁用之后召夹，重啟就可以。
截屏2022-07-05 下午5.44.09.png
方案2：在根目錄 env.d.ts中恕沫，添加如下代碼也可以解決
declare module "*.vue" {
import { App, defineComponent } from "vue";
const component: ReturnType<typeof defineComponent> & {
install(app: App): void;
};
export default component;
}
3监憎、element-plus 按需導入后，使用elmessage婶溯、elloading提示紅色下劃線枫虏。
1673574701383.png
解決方案：
在根目錄新建一個 element-plus.d.ts 文件，保證后綴名是.d.ts就可以了
export {}
declare global {
const ElMessage:typeof import('element-plus')['ElMessage']
const ElLoading:typeof import('element-plus')['ElLoading']
}
在tsconfig.js 中引入element-plus.d.ts
"include": ["element-plus.d.ts"],
4爬虱、vue3 運行報錯：Uncaught ReferenceError: globalThis is not defined
原因：
globalThis旨在通過定義一個標準的全局屬性來整合日益分散的訪問全局對象的方法。該提案目前處于第四階段腾它，這意味著它已經準備好被納入ES2020標準跑筝。所有流行的瀏覽器，包括Chrome 71+瞒滴、Firefox 65+和Safari 12.1+曲梗，都已經支持這項功能赞警。你也可以在Node.js 12+中使用它。
解決方案：
方案1：
可以通過升級node版本和瀏覽器版本解決虏两，node> 12愧旦，chrome版本>71。
方案2：
在index.html中
<script>
this.globalThis || (this.globalThis = this);
</script>
5定罢、引入router 報錯：變量“routes”在某些無法確定其類型的位置處隱式具有類型“any[]”笤虫。
解決方案：
引入RouteRecordRaw，充當路由數據類型祖凫，ts中數據類型是Array<T>琼蚯，T就是數據類型。
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
const routes:Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: () => import('@/views/layout/baselayout.vue')
},
{
path: '/login',
name: 'Login',
component: () => import('@/views/login/index.vue')
},
{
path: '/:path(.*)',
name: '404',
component: () => import('@/views/notFound/index.vue')
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
export default router
6惠况、引入element-plus
執(zhí)行命令：
npm add element-plus
如果添加命令報錯：
ERROR TypeError: Cannot read properties of undefined (reading 'replace')
表明element-plus沒有刪除干凈
執(zhí)行命令：
npm uninstall element-plus
在main.ts中刪除應用element-plus的代碼
7遭庶、按需引入element-plus 組件
按需引入element-plus
參考官方文檔
npm install -D unplugin-vue-components unplugin-auto-import
Vite
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
npm install @element-plus/icons-vue
main.ts
// 如果您正在使用CDN引入，請刪除下面一行稠屠。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
