开始
安装pnpm
没有理由就是快！
npm i pnpm
安装vite
pnpm create vite
根据提示创建
按需配置
安装依赖
cd main
pnpm install
#测试运行
npm run dev
#安装依赖
pnpm i ant-design-vue
pnpm i vue-router
pnpm i pinia
pnpm i nprogress
pnpm i sass -D
配置常用路径@
pnpm i @types/node -D
修改vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
// 如何 __dirname 找不到 需要 yarn add @types/node --save-dev
'@': path.resolve(__dirname, 'src') // 别名
}
},
server: {
port: 8080
}
})
修改tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
/* 下方为修改项 */
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
- 配置
常见问题
Node版本
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
注意启动端口
[图片上传失败...(image-dc2819-1683854407198)]
解决方案：
配置vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
port: 8080
}
})
Webpack的方法无效
如require.context 函数不存在了，解决方案如下
const btx = require.context('../views/', true, /\.vue$/)
btx.keys().forEach((fileName) => {
const cmpConfig = btx(fileName)
const cmpName = fileName.replace(/^\.\//, '').replace(/\.vue$/, '')
if (cmpName.indexOf('qiankun/') !== 0) {
routes.push({
path: '/' + cmpName,
name: cmpName,
meta: {
keepAlive: true
},
component: cmpConfig.default || cmpConfig
})
}
})
替换为
const files= import.meta.glob('../views/**/*.vue', {eager: true})
Object.keys(files).forEach((fileName: any) => {
const cmpConfig: any = files[fileName]
const cmpName = fileName.replace(/^.*views\//, '').replace(/\.vue$/, '')
routes.push({
path: '/' + cmpName,
name: cmpName,
meta: {
keepAlive: true
},
component: cmpConfig.default
})
})
