[vue] Vite的使用index.html 文件 vite..ts 文件变更 配置运行的时候自动检测规范 项目中文件的变更 `上不存在属性 "glob" 的错误`环境变量的使用:call stack size配置问题主题设置
【package.json文件变更】之前一直使用的是@vue/cli脚手架，创建新的项目，但是现在该脚手架已经处于维护阶段了，而且官网也推荐使用vite,所以这里记录一下对已有项目的迁移 @vue/cli 迁移成 vite
环境
"vue": "^3.2.47","vite": "^4.1.4",
.json文件变更 变更脚手架
1.删除原有脚手架相关包,新增脚手架
npm uninstall @vue/cli-servicenpm i vite @vitejs/plugin-vue
2.移除babel？
但是按需引入等功能？
修改脚本命令
"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint",
"serve": "vite","build": "vite build","preview": "vite preview","lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
--fix用于自动修复可忽略
index.html 文件替换为 vite--html
提示无法使用插件，替换成vite--html插件
npm uninstall html-webpack-pluginnpm i vite-plugin-html -D
所有关于该插件的使用都需要替换，可以暂时先注释，方便程序的启动
index.html 文件在@vue/cli下是放在根目录的文件夹中的，但是迁移文档说是改成vite则需要放在根目录下
然后，不使用vite--html插件的时候没有任何问题，但是发现在启用vite--html插件时，也即在vite..ts中配置该插件时总是报错，并且加载的是中的index.html文件
所以又将index.html 文件移回了文件夹中，此时正常启动，vite..ts的配置
import { createHtmlPlugin } from "vite-plugin-html";export default defineConfig(({ command, mode, ssrBuild }) => {return {plugins: [createHtmlPlugin({inject: {data: {title: "Vue3.x",online: `${online}`}}}),]}
index.html中的使用
>We're sorry butdoesn't work properly without JavaScript enabled.Please enable it to continue.
We’re sorry but vue3.x-vite-ts doesn’t work.it to .
运行时报了以上错误
type="module" src="http://www.kingceram.com/src/main.ts">
迁移文档中有说明，vite 不在自动注入，但是迁移时被忽略了，因此导致了该问题,添加上述代码后正常
vite..ts 文件变更
该文件中的变更本人是根据运行时错误提示与需求不断添加的，如果再次迁移可以直接添加，错误可以等报错的时候在添加相应配置
vite--html
该插件的使用可查看替换为 vite--html 一节
You arethe esm- build of vue-i18n. It istoyourtoflagwithto gettree- in the final .
在vite..ts中添加：
resolve: {alias: {'vue-i18n': "vue-i18n/dist/vue-i18n.esm-browser.js"}}
[vite]error: [less]is not . Is it set in your ?
在vite..ts中添加less的配置
{css: {preprocessorOptions: {less: {javascriptEnabled: true}}}}
移除 @vue/cli的去除方式
babel..js
const prodPlugin = []if (process.env.NODE_ENV === 'production') {// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warnprodPlugin.push(['transform-remove-console',{ // 不清理的内容consoleexclude: ['error', 'warn'] }])}module.exports = {presets: ["@vue/cli-plugin-babel/preset"],plugins: [[// 按需加载js"import",{libraryName: "ant-design-vue", libraryDirectory: "es", style: true}],...prodPlugin]};