在vite+vue3+ts中配置环境变量、规范的编码风格和构建生产环境的代码。

在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"
  }
}