项目配置vue.config jsconfig babel.config .prettierc .env .eslintrc

news2025/1/27 11:52:08

.env

在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

  •  在根目录添加.env文件,配置所有情况下都会用到的配置
  • .env.production对应生产环境
  • .env.development对应开发环境
  • .env.[model] 用户创建的环境

        npm run dev(serve) :其实是运行了 vue-cli service serve ,默认模式为  development (读取.env.development)。可以在 .env.development 文件下修改该模式的 NODE_ENV 。
        npm run build ,其实运行了 vue-cli service build ,默认模式为  production (读取.env.production)。可以在 .env.production 文件下修改该模式的 NODE_ENV 

        由于vue-cli只给我们默认配置了pro和dev两个环境,如果我们需要建立新环境,需要自己定义model值。

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",//默认就是 development开发环境
    "build": "vue-cli-service build",//默认就是 production生产环境
    "serve:beta": "vue-cli-service serve --mode beta",
    ...
  },

        beta为我们自建的环境,同时我们需要建立配置文件.env.beta

//.env.beta文件
NODE_ENV = 'beta';
VUE_APP_NODE_ENV = 'beta'
VUE_APP_HOST=beta.sandieyun.com

     环境变量定义必须以"VUE_APP_"作为前缀。

     在Vue.config.js里读取环境变量:

module.exports = {
    ...
    devServer: {
        https: process.env.NODE_ENV !== 'dev',
    },
}

      项目中读取环境变量:

  get linkUrl() {
    return `https://app.${process.env.VUE_APP_HOST}/link/xxxx`;
  }

        除了环境变量,还能定义两个特殊变量:

  •  NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
  •  BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径。

vue.config.js

        vue.config.js 是一个可选的配置文件,如果在项目根目录上存在这个文件,则会被@vue/cli-service加载。

module.exports = {
    xxx:xxxx,
    ...
}
publicPath

         publicPath 选项用于指定项目的公共路径,即项目部署时的基本 URL。 

        默认为"/"。

        默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/

        如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/

        publicPath可以被设置为''或者'./'。这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。

outputDir

         当运行 vue-cli-service build 时生成的生产环境构建文件的目录,也就是打包后的文件目录。

assetsDir

        放置生成的静态资源 (js、css、img、fonts) 的目录。总目录名字叫:static,里面包含子目录,css,img,js三个文件夹。

indexPath

        指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径,也可以将打包的index.html文件文字改成school,html。

module.exports = {
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html'
}
 pages

        其值应该是一个对象,对象的 key 是入口的名字,value 是:\

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块,默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时,
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话,就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}
productionSourceMap

        如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。

module.exports = {  
productionSourceMap: false, //因为内存占用问题,暂时关闭sourceMap
}
 devServer

        所有 webpack-dev-server 的选项都支持

  devServer: {
    // 非DEV环境则开启https协议
    https: process.env.NODE_ENV !== 'dev',
    // 禁用host的检查,使得webpack-dev-server可以接受来自任何网络环境下的请求
    disableHostCheck: true,
  },

        新版的vue-cli已经将disableHostCheck改成

 allowedHosts: 'all',
  lintOnSave 

        取值:true | false | 'warning' | 'default' | 'error'

        用于指定是否在保存文件时执行代码检查

  • 设置为 true 或 'warning' 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。
  • 如果你希望让 lint 错误在开发时直接显示在浏览器中,你可以使用 lintOnSave: 'default'。这会强制 eslint-loader 将 lint 错误输出为编译错误,同时也意味着 lint 错误将会导致编译失败。
  • 设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误,这意味着 lint 警告将会导致编译失败。
module.exports = {
    // 在保存文件时不会运行 lint 检查,禁用 linting 功能。
    lintOnSave: false,
}
configureWebpack

        如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。

const {
  optimize: { LimitChunkCountPlugin },
} = require('webpack');

module.exports = {
 configureWebpack: {
    plugins: [
      new LimitChunkCountPlugin({
        maxChunks: 10,
      }),
    ],
  },
}

        我们知道在webpack打包后会产生大量的chunk.xxxx的文件,如果chunk文件过多,会增加http请求的开销。所以我们加了webpack插件里的LimitChunkCountPlugin限制最大chunk文件数

chainWebpack

        是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。说白了就是给你配置更精细的webpack配置。

chainWebpack: config =>
    config
      /** @description 使用CDN访问以下依赖 */
      .externals({
        'vue': 'Vue',
        'ant-design-vue': 'antd',
        'moment': 'moment',
        'lodash': '_',
        'echarts': 'echarts',
      })
      /** @description 压缩vue文件<template>中的换行 */
      .module.rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => ({
        ...options,
        whitespace: 'condense',
      }))
      .end()
      .end()
      /** @description 支持import excel文件 */
      .rule('file')
      .test(/\.(xls|xlsx|doc|docx)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .end(),

        这里其实是三部分配置:

        我们先看这个:这部分其实只是修改 Loader 选项,在默认的loader options中新加了一条whitespace

        

        这个是新增了一个file loader,当file name符合test里的正则表达式时,引用url-loader处理它 

        这个最难理解。我们先搞清楚什么是 externals

        官方的八股文是这么写的:

就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

     其实就是把依赖插件抽离出来,通过CDN引入,而不占包体积。但是我们的项目文件又依赖这些插件生成的全局属性,比如window.Vue,window.echarts,window._。我们把依赖插件抽出来,那项目文件在打包的时候就会发生编译错误。所以我们又要把这些插件生成的全局变量名告诉webpack。

        具体可以看这篇文章,讲得很明白!Webpack--externals(外部扩展)详解_webpack externals-CSDN博客externals用法详解_webpack externalshttps://blog.csdn.net/weixin_39964419/article/details/127263941?utm_source=miniapp_weixin

jsconfig.json

        是vscode生成的。表示该目录是JavaScript项目的根目录。jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项。

{
  // 项目包含的文件
  "include": ["src/**/*"],
  // 项目排除的文件 搜索不会搜到这里面
  "exclude": ["node_modules"],
    
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "strict": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "experimentalDecorators": true
  }
}

        ESNext:泛指,它永远指向下一个版本。这个paths可以这么用:

import { crossStorageModule } from '@/enum/store';


        

babel.config

        JavaScript 编译器配置,它可以把需要转译的代码转译成低版本兼容的代码

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
};

@vue/cli-plugin-babel/preset是一种预设

他构建在’@babel/preset-env’的基础上,并添加了一些针对Vue.js项目的优化。这个预设不仅确保你可以使用最新的javascript特性,还会根据Vue.js的需求对Babel进行配置

 .prettierrc

        依赖于vscode的Prettier - Code formatter扩展

         配置好后我们可以通过右键进行格式化

{
  // 缩进字节数
  "tabWidth": 2,
  // 缩进不使用tab,使用空格
  "useTabs": false,
  // 句尾添加分号
  "semi": true,
   // 使用单引号代替双引号
  "singleQuote": true,
  // props 是否用 引号 包裹
  "quoteProps": "consistent",
  // 单引号
  "jsxSingleQuote": false,
  // 行尾逗号
  "trailingComma": "all",
  // 花括号内填充空格 { a: 23 }
  "bracketSpacing": true,
  // 标签内有文字,尾标签>会单独成一行
  "bracketSameLine": false,
  // 箭头函数一个参数是否使用括号包裹参数
  "arrowParens": "avoid",
  // just for vue
  "vueIndentScriptAndStyle": false,
  // 换行标识
  "endOfLine": "auto"
}

.eslintrc.js

# 安装eslint
npm install eslint --save-dev

大多数IDE都自带eslint插件,在编写代码的时候会按照eslint的规则进行代码提示。

module.exports = {
  // 是否在父级目录寻找配置文件
  root: true,
  // 用于启用特定环境的全局变量
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  //用于设置解析器
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@babel/eslint-parser',
    ecmaFeatures: { legacyDecorators: true },
  },
  // 配置规则
  //"off" 或 0 - 关闭规则
  //"warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
  // "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
  rules: {
    'arrow-body-style': ['error', 'as-needed'],
    'camelcase': 'error',
    'eqeqeq': ['error', 'smart'],
    'semi': ['error', 'always'],
    'no-var': 'error',
    'no-duplicate-imports': 'error',
    'no-template-curly-in-string': 'error',
    'consistent-this': ['error', '不允许将this重命名'],
    'dot-notation': 'error',
    'no-eval': 'error',
    'no-implied-eval': 'error',
    'no-multi-str': 'error',
    'no-return-await': 'error',
    'no-unneeded-ternary': 'error',
    'no-unused-vars': ['error', { ignoreRestSiblings: true }],
    'object-shorthand': 'error',
    'prefer-arrow-callback': 'error',
    'prefer-const': ['error', { destructuring: 'all' }],
    'prefer-rest-params': 'error',
    'require-await': 'error',
    'no-restricted-syntax': [
      'error',
      {
        selector: 'ForInStatement',
        message: '用Object.keys().forEach()代替for in循环',
      },
      {
        selector: 'ForStatement',
        message: '如果没有性能原因,用forEach、map代替for循环',
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'vue/multi-word-component-names': 'off',
  },
};
每次commit代码执行eslint检查

下载依赖

npm i -s -d lint-staged husky

在package.json配置

{
  "name": "triascloud-app-pc",
  "version": "0.1.0",
  "scripts": {
    "dev": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service serve",
  },
  "dependencies": {
      ...
  },
  "devDependencies": {
   ...
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    // 对js和vue文件进行检查
    "*.{js,vue}": [
      "cross-env NODE_ENV=production vue-cli-service lint",
      "git add"
    ]
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1094335.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java的Timer全网最详细总结

1.简介 在Java 1.3版本中引入了Timer工具类&#xff0c;它是一个古老的定时器&#xff0c;通常与TimerTask和TaskQueue一起使用。Timer工具类的实现涉及到TimerTask类、Timer类、TimerQueue类和TimerThread类。其中&#xff0c;TimerQueue和TimerThread类与Timer类位于同一个类…

docker安装skyWalking笔记

确保安装了docker和docker-compose sudo docker -v Docker version 20.10.12, build 20.10.12-0ubuntu4 sudo docker-compose -v docker-compose version 1.29.2, build unknown 编写docker-compose.yml version: "3.1" services: skywalking-oap:image: apach…

创意作品管理软件 Bridge 2024 mac中文版 br2024功能特色

Bridge 2024 mac旨在连接不同的Ad obe应用程序&#xff0c;帮助用户更轻松地管理和编辑他们的创意作品。 Bridge 2024 mac软件特色和功能介绍 一致的用户体验&#xff1a;Bridge 2024现在具有增强的用户界面&#xff0c;可提供与其他Creative Cloud应用程序类似的体验。用户还…

《向量数据库指南》——向量数据库一些技术难点

一些技术难点 在文章的前半部分,我们列举了一些向量数据库应该具备的特性,然后比较了以 Milvus 为代表的向量数据库和 ANN 算法库、向量检索插件的不同之处。接下来,我们来聊聊构建向量数据库过程中会遇到的一些技术难点。 就好像一架飞机一样,内部每个零部件和系统相互连通…

PPP的建链过程

下图是PPP协议整个链路过程需经历阶段的状态转移图&#xff1a; 图1 PPP链路建立过程 PPP运行的过程简单描述如下&#xff1a; 通信双方开始建立PPP链路时&#xff0c;先进入到Establish阶段。 在Establish阶段&#xff0c;PPP链路进行LCP协商。协商内容包括工作方式是SP&am…

解决win10因为WSL问题无法正常启动docker

解决win10无法成功启动dockerdesktop因为WSL问题无法启动 问题起因解决方法 问题起因 因为需要在windows复现一个CVE漏洞&#xff0c;就需要安装在WIN10上装docker&#xff0c;但是在启动的时候出现下面报错。 然后查了一下是因为WSL的版本太低了。更新以后发现打开docker仍然…

C++20中的关键字

文章目录 前言关键字列表关键字含义总结 前言 源于上一篇中提到了 decltype是一个关键字&#xff0c;所以去查了现有的关键字列表&#xff0c;其实我对C/C的关键字还停留在上世纪大概30多个的时代&#xff0c;虽然知道C加了 auto、constexpr 等关键字&#xff0c;但查询过后才…

52 杨辉三角

杨辉三角 题解1 DP 给定一个非负整数 numRows&#xff0c;生成 杨辉三角的前 numRows 行。 在杨辉三角中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 示例 2: 输入: numRows 1 输出: [[1…

关于操作系统中对进程管理的认识

文章目录 前言1.计算机组成简单认识2.操作系统1). 操作系统的管理2). 操作系统的目的 3.操作系统中的进程管理1). 进程是什么&#xff1f;2).Linux中的进程 前言 在介绍进程之前&#xff0c;我们需要先了解关于进程的一些边缘的操作系统知识 以及硬件知识&#xff0c;因为操作…

leetCode 1143.最长公共子序列 动态规划 + 图解

此题我的往期文章推荐&#xff1a; leetCode 1143.最长公共子序列 动态规划 滚动数组-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/133689692?spm1001.2014.3001.5501leetCode 1143.最长公共子序列 一步步思考动态规划 优化空间复杂度_呵呵哒(&#xf…

Lua 调试库( debug )

一、调试库作用 使用调试库可以获取 Lua 环境运行过程中的变量和跟踪代码执行。 调试库主要分为两类函数&#xff1a;自省函数和钩子函数 自省函数&#xff1a;允许检查一个正在运行中的程序&#xff0c;例如活动函数的栈、当前正在执行的代码行、局部变量的名称和值。钩子函…

Java多线程悲观锁和乐观锁

悲观锁&#xff1a; 一上来就加锁&#xff0c;没有安全感&#xff0c;每次只能一个线程进入访问完毕后&#xff0c;再解锁。 线程安全&#xff0c;性能较差 乐观锁&#xff1a; 一开始不上锁&#xff0c;认为是没有问题的&#xff0c;大家一起跑&#xff0c;等要出现线程安全问…

SpringBoot--手写组件动态更新@Value的值

原文网址&#xff1a;SpringBoot--手写组件动态更新Value的值_IT利刃出鞘的博客-CSDN博客 简介 本文手写组件&#xff0c;动态更新SpringBoot里Value的值&#xff08;无需重启服务&#xff09;。 不是可以用RefreshScope吗&#xff1f;为什么要手写组件&#xff1f; 动态更…

docker数据卷+挂载(命令讲解+示例)

在容器中管理数据主要有两种方式&#xff1a; 数据卷&#xff08;Volumes&#xff09; 、挂载主机目录 (Bind mounts)。 一、数据卷 数据卷是一个可供一个或多个容器使用的特殊目录&#xff0c;可以在容器之间共享和重用。 特点&#xff1a; 对 数据卷 的修改会立马生效对 …

动态规划简述;斐波那契数列自顶向下和自底向上

概述 动态规划就是把一个问题分解为若干子问题&#xff0c;把子问题的解累加起来&#xff0c;就是当前问题的值。 斐波那契数列&#xff08;自顶向下&#xff09; 一个很好的演示demo&#xff0c; 在进行运算时&#xff0c;要用上备忘录&#xff08;缓存&#xff09;&#x…

从硬件结构到软件

先说说体系冯诺依曼的体系结构&#xff0c;有利于我们后面理解操作系统&#xff0c;软件再怎么发展&#xff0c;也必须遵守硬件的规则。 一 五大硬件理解 如下图: 1 为什么要有输入输出设备 很久以前&#xff0c;我们都是把指令打成孔&#xff0c;有孔无孔表示0,1&#xff0c…

柯桥日常口语学习|生活英语|实用口语口语天天练

1. How far is it from here? 离这儿有多远&#xff1f; 2. Can you give me a hand? 能帮帮我吗&#xff1f; 3. I cant lift my right arm. 我无法举起我的右手臂。 4. This bridge was built two years ago. 这座桥是在两年前建造的。 5. You should eat more. 你应该…

Go语言入门心法(一): 基础语法

Go语言入门心法(一) Go语言入门心法(二): 结构体 Go语言入门心法(三): 接口 一: go语言中变量认知 go语言中变量的定义: &#xff08;要想飞|先会走&#xff09;||&#xff08;翻身仗|抹遗憾 &#xff09; |&#xff08;二八定律&#xff09;(先量变)|(再质变)||&#xf…

vue3实现刻度尺

期望实现效果如下&#xff1a; 一、基本使用 安装slide-ruler&#xff0c;根据文档实现内容 https://github.com/wusb/slide-ruler/blob/master/README-zh_CN.md 二、进一步处理 1、直接复制slide-ruler核心文件&#xff0c;在此基础上进一步处理 处理1&#xff1a;刻度朝向…

思维模型 秩序

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。秩序是事物正常运行的基石。有序的安排是成功的先决条件。 1 秩序的应用 1.1 秩序在不同科学领域中的应用 物理学和天文学&#xff1a; 物理学家通过研究原子和分子的有序排列来理解物质的…