vite搭建vue3项目及相关配置

1.npm create vite 

设置你的项目名，选择框架，选择语言

我此处选的为Vue + typescripe

2.按照命令去执行 cd vite-vue3-app 进入项目文件，npm install 安装依赖，npm run dev 运行项目

此处由于node、npm版本导致报错问题如图

在安装依赖的时候有提示node版本需要大于18，而我本地的node版本为16.20.1 npm版本为8.19.4

解决方法 1.升级node版本（我用的nvm版本管理工具，切换到高版本，删除node_modules文件夹，重新安装依赖）

vue3的官方文档也要求node版本要18+，

方法2.如果由于各种原因不能升级node，那需要手动修改package.json中vite的版本，降低vite的版本到例如 4.4.5（删除node_modules文件夹，重新安装依赖，然后启动项目）

3.安装项目所需的基础插件

看你自己需要啥，安装啥，此处我安装的依赖

npm install axios pinia vue-router vant -S

Vant 是一个轻量、可定制的移动端组件库 Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

npm install less unplugin-auto-import unplugin-vue-components @vant/auto-import-resolver postcss-px-to-viewport @types/node -D

4.配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
import postcssPxToViewport from 'postcss-px-to-viewport';
import resolveConfig from './resolveConfig/resolveConfig';
import tsConfig from './viteConfig/plugins/setTsConfig';
import path from 'path';
import replaceCode from './viteConfig/plugins/replaceCode';
// https://vite.dev/config/
export default defineConfig({base: './',server: {host:true},plugins: [vue(),tsConfig(),replaceCode([{search: '@paycenter',replace: '----',//你自己需要替换的域名地址等attr: 'ig',}]),AutoImport({imports: ['vue', 'vue-router'],// 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'dts: 'src/auto-import.d.ts',}),Components({resolvers: [VantResolver()],}),],resolve:{alias: {'@':path.resolve(__dirname,'src'),...resolveConfig,}},css: {postcss: {plugins: [postcssPxToViewport({unitToConvert: 'px', // 要转化的单位viewportWidth: 375, // UI设计稿的宽度// viewportHeight: 667, //视口的高度，对应的是设计稿的高度（也可以不配置）unitPrecision: 6, // 转换后的精度，即小数点位数propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vwfontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配landscape: false, // 是否处理横屏情况}),],},},build: {outDir: process.env.NODE_ENV,chunkSizeWarningLimit: 1500,assetsDir: 'assets',terserOptions: {// 清除console和debuggercompress: {drop_console: true,drop_debugger: true,},},rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return 'vendor'}},},},},
})

 vite.config.ts 中涉及的文件如下

replaceCode.ts

function replaceCodePlugin(options) {return {name: "替换文件内特殊内容",transform(code) {let filterCode = code;options.forEach(item => {let reg = new RegExp(item.search, item.attr);filterCode = filterCode.replace(reg, item.replace);})return {code: filterCode,}},};
}
export default replaceCodePlugin

setTsConfig.ts

import fs from 'fs';
import tsJson from '../tsconfigTemplate'
import path from 'path';
function tsConfigPlugin(){return {name:"替换tsconfig.json",buildStart(){let filePath=path.resolve(__dirname,"../../tsconfig.json");fs.writeFileSync(filePath,JSON.stringify(tsJson));}}
}export default tsConfigPlugin; 

tsconfigTemplate.ts

import resolveConfig from '../resolveConfig/resolveConfig'
let tsJson={"compilerOptions": {"types": ["vite/client","node"],"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "preserve","strict": false,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"baseUrl":"","paths":{}},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }],
};for(let key in resolveConfig){tsJson.compilerOptions.paths[key]=[resolveConfig[key]]
}export default tsJson;

resolveConfig.ts

import path from 'path';
const resolveConfig = {'@/*':"src/*",error: path.resolve(__dirname, '../src/pages/error/index.vue'),'@payment': path.resolve(__dirname, '../src/pages/payment'),'@payment/*': 'src/pages/payment/*'
};
export default resolveConfig;