Vite配置vue3入门和常见问题

开始

安装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" }]
}

2. 配置

常见问题

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
    })
})

相关文档