Configure environment variables, standardized coding style and code to build production environment in vite+vue3+ts.

Configure environment variables, standardized coding style and code to build production environment in vite+vue3+ts.

Configure environment variables

Please follow my above article (vite+ vue3 +ts novice tutorial) to install vite+vue3+ts, etc.

To configure environment variables in Vite + Vue3 + TS, you can follow the following steps:

.envA file is a file used to store environment variables. .env.productionA file is usually used in a production environment. .env.developmentA file is usually used in a development environment.

Create a file in the project root directory .env.devto store environment variables

# .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/' //表示当前应用程序的前端地址为 

Create configuration files for different deployment environments, such as .env.development, .env.productionetc. In each file, you can add .envvariables that override those in the file or add new variables. For example: .env.proand .env.proxyetc.

These environment variables can be used in code, for example:

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;

Standard coding style

In the Vite + Vue3 + TypeScript project, .eslintrc.jsfiles can help developers better standardize and maintain the code, and ensure the readability and maintainability of the code.

pnpm install eslint @vue/cli-plugin-eslint eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier --save-dev //安装 ESLint 和 Prettier 以及相关插件

.eslintrc.jsCreate file in root directory

// 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
      }
    }
  ]
}

Create a file in the project root directory .prettierrc.jsand write the following code:

module.exports = {
    
    
     singleQuote: true, // 使用单引号
     semi: true, // 在语句的末尾打印分号
     trailingComma: 'all', // 多行对象和数组的最后一个元素后面是否添加逗号（都添加）
     printWidth: 80, // 超过 80 个字符时换行
     tabWidth: 2, // 使用 2 个空格缩进
   };

package.jsonAdd the following configuration to the file :

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

Install ESLint and Prettier plug-ins in the IDE/editor, and configure automatic formatting and automatic saving.

eslint.autoFixOnSaveTo configure ESLint to automatically run when saving in the IDE/editor, for example in VS Code, you can search for and options in the settings to eslint.validateconfigure.

Using the above steps, we can automatically see static code inspection and formatting prompts when writing code, and maintain a unified code style.

Build code for production environments.

Use the following method to build the environment conveniently and quickly when packaging:

npm run build # 执行生产环境的构建命令（生成文本模式的代码）
npm run build:pro # 执行生产环境的构建命令（生成生产模式的代码）

package.jsonIn the file in the project root directory

"scripts": {
    
    
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build --mode text", //测试环境
    "build:pro": "vue-tsc --noEmit && vite build --mode production", //正式环境
    "preview": "vite preview"
  },

It should be noted that the command is used here vue-tscto perform TypeScript type checking, so you need to install the package in the project @vue/compiler-sfcand obtain the command through the package vue-tsc.

//以便在 Vue3 + TypeScript 项目中执行编译器相关的任务，如编译 .vue 单文件组件等。

npm install @vue/compiler-sfc --save-dev  //需安装此ba

After the installation is complete, package.jsonyou can see in the file that the package has been added as a development dependency:

{
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.6"
  }
}