在vite+vue3+ts中配置环境变量、规范的编码风格和构建生产环境的代码。
配置环境变量
请按照我的上述文章(vite+vue3+ts新手使用教程)安装vite+vue3+ts等
在 Vite + Vue3 + TS 中配置环境变量可以按照以下步骤进行：
.env 文件是用来存储环境变量的文件.env.production 文件通常用于生产环境. .env.development 文件通常用于开发环境
在项目根目录下创建一个 .env.dev 文件，用于存储环境变量
# .env.dev
NODE_ENV=development//表示当前环境为开发环境
VITE_Version = 'v1.0.0'//表示当前应用程序的版本号为 v1.0.0。
VITE_BaseURL = '//xx.xxxx.xxx.xx.cn/'//表示当前应用程序的后端 API 地址为
VITE_FileURL = '//xx.xxx.xxx.xxx.cn/'//表示当前应用程序的文件上传地址为
VITE_WebURL = '//xx.xxx.xx.cn/' //表示当前应用程序的前端地址为
创建不同部署环境的配置文件，比如 .env.development、.env.production 等等。在每个文件中，你可以添加覆盖 .env 文件中的变量或者添加新的变量。例如：.env.pro和.env.proxy等
这些环境变量可以在代码中使用，例如：
const version = import.meta.env.VITE_Version;
const baseURL = import.meta.env.VITE_BaseURL;
const fileURL = import.meta.env.VITE_FileURL;
const webURL = import.meta.env.VITE_WebURL;
规范的编码风格
在 Vite + Vue3 + TypeScript 项目中，.eslintrc.js 文件可以帮助开发者更好地规范和维护代码，并保证代码的可读性和可维护性。
pnpm install eslint @vue/cli-plugin-eslint eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier --save-dev //安装 ESLint 和 Prettier 以及相关插件
在根目录创建.eslintrc.js文件
// javascript 代码风格检查工具 eslint 配置文件。它定义了项目的语法环境、扩展和规则等信息，以便在编码过程中进行语法检查和风格统一
module.exports = {
root: true,//root: true 表示这是 eslint 的根配置文件。
env: { //env: { node: true } 声明该代码运行于 node.js 环境。
node: true
},
extends: [ //extends 属性包含了一些预定义的规则集合，用于保证代码的质量和风格一致性。
'plugin:vue/vue3-essential',// 使 eslint 支持 vue 3 模板。
'eslint:recommended', //启用 eslint 推荐的规则。
'@vue/typescript/recommended',//添加 typescript 相关的推荐规则集。
'@vue/prettier', //是为了与 prettier 集成，保证代码格式的一致性。
'@vue/prettier/@typescript-eslint' //是为了与 prettier 集成，保证代码格式的一致性。
],
parserOptions: { //属性声明了使用的 ecmascript 版本。
ecmaVersion: 2020
},
rules: { //属性定义了一些自定义的规则，如不允许在生产环境下使用 console 和 debugger 语句。
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
},
overrides: [ //属性定义了针对某些特定文件或目录的覆盖规则，如指定 mocha 测试相关的语法环境。
{
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
env: {
mocha: true
}
}
]
}
在项目根目录下创建 .prettierrc.js 文件，并写入以下代码：
module.exports = {
singleQuote: true, // 使用单引号
semi: true, // 在语句的末尾打印分号
trailingComma: 'all', // 多行对象和数组的最后一个元素后面是否添加逗号（都添加）
printWidth: 80, // 超过 80 个字符时换行
tabWidth: 2, // 使用 2 个空格缩进
};
在 package.json 文件中添加以下配置：
{
"eslintConfig": {
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"plugins": ["@typescript-eslint", "prettier"],
"parserOptions": {
"parser": "@typescript-eslint/parser"
},
"rules": {
"no-console": "off",
"no-debugger": "off",
"prettier/prettier": "error"
}
},
"prettier": {
"singleQuote": true,
"semi": true,
"trailingComma": "all",
"printWidth": 80,
"tabWidth": 2
}
}
在 IDE/编辑器中安装 ESLint 和 Prettier 插件，并配置自动格式化及自动保存。
在 IDE/编辑器中配置保存时自动运行 ESLint，例如在 VS Code 中，可以在设置中搜索 eslint.autoFixOnSave 和 eslint.validate 选项进行配置。
使用以上步骤，我们在编写代码时，就能够自动地看到静态代码检查和格式化提示，并保持代码风格的统一。
构建生产环境的代码。
使用方法以下打包时候可以方便快捷构建环境
npm run build # 执行生产环境的构建命令（生成文本模式的代码）
npm run build:pro # 执行生产环境的构建命令（生成生产模式的代码）
在项目根目录下package.json文件中
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build --mode text", //测试环境
"build:pro": "vue-tsc --noEmit && vite build --mode production", //正式环境
"preview": "vite preview"
},
需要注意的是，这里使用的是 vue-tsc 命令来进行 TypeScript 的类型检查，因此需要在项目中安装 @vue/compiler-sfc 包，通过该包来获取 vue-tsc 命令。
//以便在 Vue3 + TypeScript 项目中执行编译器相关的任务，如编译 .vue 单文件组件等。
npm install @vue/compiler-sfc --save-dev //需安装此ba
安装完成后,在 package.json 文件中可以看到该包已经被作为开发依赖项添加：
{
"devDependencies": {
"@vue/compiler-sfc": "^3.2.6"
}
}
