MENU

【笔记】VS Code 开发 Vue 项目的各个配置项

2021 年 09 月 09 日 • 阅读: 81 • 笔记

前言

这里记录一下开发 Vue 项目时,所用到的各个配置项。这里,我是使用 VS Code 进行开发 Vue 项目。
我所使用的 VS Code 插件有 ESlint, Prettier, Vetur, Vue 3 Snippets。
本篇文章记载的各个配置项仅为个人使用时所用,并不全面!

文档中标题 aaa@bbb 代表 bbb 配置项的配置 aaa
例如,publicPath@vue.config.js 表示 vue.config.js 配置项中的 publicPath 配置

vue.config.js 配置项

vue.config.js 配置项是 vue-cli 快速搭建项目时在根目录生成的配置,在这个文件中可以对项目的打包构建进行全局配置。
具体配置项可以查看 Vue CLI 官网:https://cli.vuejs.org/zh/config/#vue-config-js

publicPath@vue.config.js

publicPath 介绍

部署应用包时的基本 URL,用法和 webpack 配置项 output.publicPath 一致,但 Vue 项目中还有其他地方用到此配置项
所以在 Vue 项目中,不推荐更改 webpack 配置项 output.publicPath
Vue CLI 默认假设你将项目打包到一个域名的根目录中
如果项目被部署到一个子路径中,就需要使用这个配置项指定子路径
例如,你要将项目部署到 https://www.my-app.com/my-app/ 下,则设置 publicPath/my-app/
如果将 publicPath 设置为 '' 或者 './' 则所有资源会链接为相对路径,项目部署到任何路径都可以,但也有限制

示例代码

module.exports = {
  publicPath: './'
}

outputDir@vue.config.js

outputDir 介绍

vue-cli-service build 时,即打包发布项目时(production 模式)生成的生产环境构建文件的目录(即打包后的代码所在的目录)。

默认值为 './dist',指打包生成的代码会被放到根目录下 dist 目录下
若更改为 './bundle',则打包生成的代码将被放到根目录下的 bundle 目录下

示例代码

module.exports = {
  publicPath: './',
  outputDir: './bundle',
}

assetsDir@vue.config.js

assetsDir 介绍

放置生成的静态资源 (js、css、img、fonts) 的目录(目录相对于 outputDir)。

默认值为 '',指打包生成的 js 文件会放在根目录下的 js 目录中
若修改为 'asset',则打包生成的 js 文件会放在根目录下的 asset 目录下的 js 目录中

示例代码

module.exports = {
  publicPath: './',
  outputDir: './bundle',
  assetsDir: 'asset'
}

indexPath@vue.config.js

indexPath 介绍

指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

默认值为 'index.html',指打包生成的 html 文件会在 outputDir 目录下,文件名为 index.html
若修改为 'index123.html',则打包生成的 html 文件会在 outputDir 目录下,文件名为 'index123.html'

示例代码

module.exports = {
  publicPath: './',
  outputDir: './bundle',
  assetsDir: 'asset',
  indexPath: 'index123.html'
}

devServer@vue.config.js

devServer 介绍

webpack-dev-server 的配置项。

常用子配置项如下:

  1. proxy
  2. https
  3. host
  4. port
  5. open

proxy@devServer

proxy 介绍

如果前端应用和后端 API 服务器没有运行在同一个主机上,需要在开发环境下将 API 请求代理到 API 服务器。
此配置属性可以用于解决 请求跨域 问题。

示例代码
module.exports = {
  publicPath: './',
  outputDir: './bundle',
  assetsDir: 'asset',
  indexPath: 'index123.html',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        secure: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

https@devServer

https 介绍

开发环境下使用 https 方式访问页面。
默认值为 'false',指开发环境下访问页面时使用 http 方式。
若改为 'true',则开发环境下访问页面时使用 https 方式。

示例代码
module.exports = {
  publicPath: './',
  outputDir: './bundle',
  assetsDir: 'asset',
  indexPath: 'index123.html',
  devServer: {
    https: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        secure: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

host@devServer

host 介绍

开发环境下的访问的 host。
默认值为 '127.0.0.1',指开发环境下访问页面时使用 127.0.0.1 host。
若修改为 '127.0.0.2',则开发环境下访问页面时使用 127.0.0.2 host。

示例代码
module.exports = {
  publicPath: './',
  outputDir: './bundle',
  assetsDir: 'asset',
  indexPath: 'index123.html',
  devServer: {
    https: true,
    host: '127.0.0.2',
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        secure: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

port@devServer

port 介绍

开发环境下访问的 port。
默认值为 '8080',指开发环境下访问页面时使用 8080 端口。
若修改为 '8088',则开发环境下访问页面时使用 8088 端口。

示例代码
module.exports = {
  publicPath: './',
  outputDir: './bundle',
  assetsDir: 'asset',
  indexPath: 'index123.html',
  devServer: {
    https: true,
    host: '127.0.0.2',
    port: 8088,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        secure: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

open@devServer

open 介绍

开发环境下打包完成时是否自动打开浏览器并自动进入页面。
默认值为 'false',指开发环境下不会自动打开浏览器进入页面。
若修改为 'true',则开发环境下将会自动打开浏览器进入页面。

示例代码
module.exports = {
  publicPath: './',
  outputDir: './bundle',
  assetsDir: 'asset',
  indexPath: 'index123.html',
  devServer: {
    open: true,
    https: true,
    host: '127.0.0.2',
    port: 8088,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        secure: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

.editorconfig 配置项

editorconfig 介绍

EditorConfig 帮助开发人员在不同的编辑器和 IDE 之间定义和维护一致的编码样式。
EditorConfig 项目由用于定义编码样式的文件格式和一组文本编辑器插件组成,这些插件使编辑器能够读取文件格式并遵循定义的样式。
EditorConfig 文件易于阅读,并且与版本控制系统配合使用。
EditorConfig 官网:https://editorconfig.org/

editorconfig 优点

  • 广泛性:可用于各大编辑器(VSCode、WebStorm、Atom、SubLime)
  • 简单性:配置极其简单
  • 统一性:规范常用的基本的代码格式要求

editorconfig 缺点

  • 和其他格式化工具例如 ESlint、Prettier 等配置容易出冲突
  • 不能配置 trim_trailing_semicolon 等

editorconfig 使用方法

配置格式:

[匹配文件语句]
格式控制配置语句

例如:

root = true                           # 根目录配置文件,编辑器会由当前目录向上查找,如果找到`root = true` 的文件,则不在查找

[*.{js,jsx,ts,tsx,vue}]               # 匹配 js jsx ts tsx vue 文件
indent_style = space                  # 缩进使用空格
indent_size = 2                       # 缩进空格为2个
trim_trailing_whitespace = true       # 不保留行末的空格
insert_final_newline = true           # 文件末尾添加一个空行
quote_type = single                   # 引号使用单引号
charset = utf-8                       # 文件编码是 utf-8
spaces_around_operators = true        # 运算符两边都加上空格

.prettierrc.js 配置项

prettier 介绍

prettier 是一个有 “态度”(opinionated) 的代码格式化工具,支持众多编程语言,已经集成到大多数编辑器中,几乎不需要设置参数。

为什么说 prettier 是一个有 “态度” 的代码格式化工具呢?
其实是因为,prettier 只关注格式化,并不具有 lint 检查语法等能力,所以开始大家可能会经常碰到 lint 搭配 prettier 会出现冲突。
而且 prettier 独断自行一套格式化风格,虽然提供配置,也只是配置少量的关键属性
prettier 官网:https://www.prettier.cn/

prettier 优点

  • 支持众多编程语言(JavaScript、JSX、TypeScript、JSON、CSS、Less、SCSS、Markdown、HTML、Vue、Angular、GraphQL、YAML、PHP、XML、Java、Ruby)
  • 支持众多编辑器(Atom、Emacs、Espresso、Nova、Sublime Text、Vim、Visual Studio、VS Code、WebStorm)
  • 生态好(在 GitHub 上有超过 290 万个源码仓库依赖 Prettier、在 npm 上有超过 8000 个依赖包)
  • 可配置化且配置项简洁

prettier 缺点

  • 可能和各种 lint 起冲突

prettier 使用方法

VS Code 下载安装 Prettier - Code formatter 扩展

pic68

VS Code 配置项 (settings.json) 中配置自动在保存时格式化

{
  "editor.formatOnSave": true
}

VS Code 在 Vue 根目录下创建 '.prettierrc.js' 文件,内部代码示例:

module.exports = {
  // tab 缩进大小, 默认为 2
  tabWidth: 2,
  // 使用 tab 缩进,默认为 false
  useTabs: false,
  // 使用分号, 默认为 true
  semi: false,
  // 使用单引号, 默认为 false (在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 行尾逗号,默认为 none, 可选值有 none、es5、all
  // es5 包括 es5 中的数组、对象
  // all 包括函数对象等所有可选
  TrailingCooma: 'all',
  // 对象中的空格 默认为 true
  // true:{ foo: bar }
  // false:{foo: bar}
  bracketSpacing: true,
  // 箭头函数参数括号 默认为 avoid 可选值有 avoid、always
  // avoid:能省略括号的时候就省略 例如(x) => x
  // always:总是有括号
  arrowParens: 'avoid'
}

.eslintrc.js 配置项

eslint 介绍

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。
ESlint 官网: https://eslint.bootcss.com/

eslint 特点

  • ESLint 使用 Espree 解析 JavaScript。
  • ESLint 使用 AST 去分析代码中的模式。
  • ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

eslint 使用方法

npm 安装 ESlint 或者 vue-cli 创建项目时勾选 ESlint

npm install eslint --save-dev # --save-dev 表示放在 package.json 下的 devDependencies 节点下

pic69

VS Code 在 Vue 根目录下创建 '.eslintrc.js' 文件,内部代码示例:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/standard'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  // 代码风格规范规则
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 表示函数参数括号与函数名之间是否有空格以及是否报错
    // error 表示报错
    // never 表示不允许有空格
    // 更多参数以及规则可以看出 ESlint 中文网官方介绍
    // https://eslint.bootcss.com/docs/rules/
    'space-before-function-paren': ['error', 'never']
  }
}
返回文章列表 文章二维码
本页链接的二维码
打赏二维码