首页 前端知识 在vite vue3 ts中配置环境变量、规范的编码风格和构建生产环境的代码。

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

2024-07-20 17:07:36 前端知识 前端哥 310 723 我要收藏

在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.autoFixOnSaveeslint.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"
  }
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14003.html
标签
评论
发布的文章

HTML5 移动开发秘籍(一)

2024-08-05 23:08:12

【HTML5系列教程】

2024-08-05 23:08:12

HTML5面试题

2024-08-05 23:08:06

JQuery基础---01

2024-08-05 23:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!