一base
1删除Vue CLI相关依赖
npm uninstall @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service
2安装Vite相关依赖
npm i vite @vitejs/plugin-vue -D
// 对于Vue 3项目；如果是Vue 2项目，则使用vite-plugin-vue2
3修改package.json
"scripts": { "serve": "vite", "build": "vite build" }
4创建vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 对于Vue 3项目；如果是Vue 2项目，则使用vite-plugin-vue2
export default defineConfig({
plugins: [vue()],
});
5修改index文件空
把index.html 放在根目录
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + Vue</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body></html>
6启动项目 npm run serve
二 实际项目遇到的坑
1项目中使用@报错
vite.config
import path from "path";
resolve: { alias: { "@": path.resolve(__dirname, "./src"), "@components": path.resolve(__dirname, "./src/components"), "@utils": path.resolve(__dirname, "./src/utils"), // 你可以继续添加更多的别名 }, },
2项目中引入省略.vue 或者.js
添加 extensions: [".vue", ".js"],解决
resolve: { alias: { "@": path.resolve(__dirname, "./src"), "@components": path.resolve(__dirname, "./src/components"), "@utils": path.resolve(__dirname, "./src/utils"), // 你可以继续添加更多的别名 }, extensions: [".vue", ".js"], },
3post.config.js报错autoprefixer
npm i autoprefixer
4最难改的老项目中是用require
vite不支持require
安装插件 vite-plugin-require-transform
vite.config
import requireTransform from 'vite-plugin-require-transform';
export default defineConfig({ plugins: [ // passing string type Regular expression requireTransform({ fileRegex: /.js$|.jpg$|.png$|.vue$/}), ], // 其他配置，如服务器端口、代理、解析别名等});
到这也会报错因为我这个老项目中require 引入的图片命名包含@符号 和某些插件冲突一直报错
解决办法写了一个全局删除引入图片中命名包含@符号的都去掉
renameFiles.js
const fs = require("fs");const path = require("path");const util = require("util");const readFile = util.promisify(fs.readFile);const writeFile = util.promisify(fs.writeFile);// 递归遍历目录的函数async function traverseDirectory(dir) { const items = await fs.promises.readdir(dir, { withFileTypes: true }); for (const item of items) { const fullPath = path.join(dir, item.name); if (item.isDirectory()) { // 如果是目录，递归遍历 await traverseDirectory(fullPath); } else { // 如果是文件，检查并修改内容 await modifyFileContent(fullPath); } }}// 修改文件内容的函数async function modifyFileContent(filePath) { try { const fileContent = await readFile(filePath, "utf8"); const imagePattern = /images\/[^@\s]*@[^@\s]*\.(jpg|png)/g; // 正则表达式，但请注意这可能有误报 const updatedContent = fileContent.replace(imagePattern, (match) => { // 只替换掉路径中的 @ 字符，但保留其他部分 // 注意：这个正则表达式可能会匹配到不应该匹配的字符串，因为它没有考虑路径的完整结构 // 一个更安全的做法是使用一个解析器来解析文件内容，并确定哪些字符串是文件路径 return match.replace(/@/g, ""); // 去掉所有 @ 字符 }); if (fileContent !== updatedContent) { await writeFile(filePath, updatedContent, "utf8"); console.log(`Modified: ${filePath}`); } } catch (error) { console.error(`Error processing file ${filePath}:`, error); }}// 指定要遍历的根目录const rootDir = "./src"; // 替换为你的项目目录// 开始遍历traverseDirectory(rootDir) .then(() => console.log("All files processed.")) .catch((error) => console.error("Error traversing directory:", error));
删除图片命名带@
reDirectory.js
const fs = require("fs");const path = require("path");// 递归遍历目录的函数function traverseDirectory(dir) { const items = fs.readdirSync(dir); for (const item of items) { const fullPath = path.join(dir, item); const stat = fs.statSync(fullPath); if (stat.isDirectory()) { // 如果是目录，递归遍历 traverseDirectory(fullPath); } else if (stat.isFile() && item.includes("@")) { // 如果是文件且文件名包含@，重命名文件 const newName = item.replace(/@/g, ""); // 去掉@字符 const newFullPath = path.join(dir, newName); fs.renameSync(fullPath, newFullPath); console.log(`Renamed: ${fullPath} -> ${newFullPath}`); } }}// 指定要遍历的根目录const rootDir = "./src"; // 替换为你的项目目录// 开始遍历traverseDirectory(rootDir);
执行 node renameFiles.js 和node reDirectory.js
