vue3搭建成功后的一些简单配置
1.浏览器增加扩展插件 “Vue.js devtools”
极简插件：https://chrome.zzzmh.cn/ 搜索vue （建议再装一个 json 展示格式化插件）
2.下载vscode
官网：https://code.visualstudio.com/Download
安装好后， 将项目在vsdode 中打开。
如果要设置VSCode 中文 shift+ctrl+p 输入 configure display language 选择中文简体， 重启VSCode
3.vscode 中 安装一些 插件 shift+ctrl+x 搜索vue3 自行选择安装 （我用的[Aya Vue3 extension Pack v0.1.0],包含了16个扩展，懒得一个个装）
4.如果vscode 启动 pnpm run dev 报以下错误：
pnpm : 无法加载文件 E:\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ pnpm run dev
+ ~~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解决： 找到 nodejs 文件夹 pnpm.ps1 和 pnpx.ps1 删除即可
=============================以下为一些基础配置或搭建前期的异常==================================================
配置 package.json 参考如下：
官网：https://cn.vitejs.dev/guide/cli.html
开发服务器
vite
在当前目录下启动 Vite 开发服务器。vite dev 和 vite serve 是 vite 的别名。
使用
vite [root]
选项
选项
--host [host] 指定主机名称 (string)
--port <port> 指定端口 (number)
--open [path] 启动时打开浏览器 (boolean | string)
--cors 启用 CORS (boolean)
--strictPort 如果指定的端口已在使用中，则退出 (boolean)
--force 强制优化器忽略缓存并重新构建 (boolean)
-c, --config <file> 使用指定的配置文件 (string)
--base <path> 公共基础路径（默认为：/）(string)
-l, --logLevel <level> info | warn | error | silent (string)
--clearScreen 允许或禁用打印日志时清除屏幕 (boolean)
--profile 启动内置的 Node.js 调试器（查看 性能瓶颈）
-d, --debug [feat] 显示调试日志 (string | boolean)
-f, --filter <filter> 过滤调试日志 (string)
-m, --mode <mode> 设置环境模式 (string)
-h, --help 显示可用的 CLI 选项
-v, --version 显示版本号
vite.config.ts 中 为开发服务器配置自定义代理规则
port:8000,
server: {
//为开发服务器配置自定义代理规则
proxy: {
// 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
// '/foo': 'http://localhost:4567',
// 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
// '/api': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, ''),
// },
}
}
=====================================
vite配置开发环境自动打开计算机默认浏览器
找到 package.json 在 “dev”：“vite” 中添加 空格--open 如下：
类型： boolean | string
默认： server.open
开发服务器启动时，自动在浏览器中打开应用程序。当该值为字符串时，它将被用作 URL 的路径名。
如果你想在你喜欢的某个浏览器打开该开发服务器，你可以设置环境变量 process.env.BROWSER （例如 firefox）。
欲了解更多细节，请参阅 open 包的源码。
引用一篇 自定义 启动后指定浏览器 打开 的文章 https://www.bilibili.com/opus/730919201055703056 星光免兔 编辑于 2022年11月21日 16:07 收录于文集 vue3 · 8篇 vite配置server.open开启后，会在运行dev成功时默认打开指定页面，此时会使用电脑的默认浏览器进行打开。但是，如果开发浏览器不是默认浏览器时就需要进行配置。 查询vite的官方文档，这个功能是引用open的这个库。这个库是支持指定浏览器打开页面。但是vite的文档对这个设置的描述比较简单，原文如下： 若你想指定喜欢的浏览器打开服务器，你可以设置环境变量 process.env.BROWSER（例如：firefox）。 原来设置环境变量就可以了，那么在vite上如何设置环境变量？搜索出来的是.env的设置。如果百度环境变量的设置也是出来同样的结果。经过测试，此环境变量非彼环境变量， .env的环境变量配置的是开发环境里要用到的常量，可以引用到代码里的。而此时要配置的环境变量只是需要作用于node的环境。 虽然这个解释很绕，但是简单的说，就是经过测试配置.env的文件是不行的。正确的配置方法引用是安装cross-env，然后修改dev的启动命令：cross-env BROWSER='chrome' vite cross-env是一个设置环境变量的库，想了解的请自行百度。 经过这样配置后，就可以使用指定的浏览器自动打开网页了。整个人也感到神清气爽了。
=========================== 一些 异常 ===========================================
Internal server error: Preprocessor dependency "sass-embedded" not found. Did you install it?
Try `pnpm add -D sass-embedded`.
########## 解决 ##############
pnpm i sass
pnpm add -D sass-embedded
=========================
Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api
########## 解决 ##############
vite.config.ts 中 export default defineConfig 方法花括号内添加
css: {
preprocessorOptions: {
scss: {
api: "modern-compiler" // or 'modern'
}
}
},
然后server restarted. 重启
==================================
