我们在做vue项目的时候,在根目录中肯定都看到过一个config.js文件,那么这个文件在整个项目中到底有什么作用呢?

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。具体可以查阅Vue CLI配置参考:https://cli.vuejs.org/zh/config/#vue-config-js

比较常见的配置项有:

  • baseUrl ( publicPath )
    部署应用包时的基本 URL。
  • outputDir
    当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
  • assetsDir
    放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  • pages
    在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
  • lintOnSave
    是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
    设置为 true 或 ‘warning’ 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。
  • devServer
    所有 webpack-dev-server 的选项都支持。注意:
    有些值像 host、port 和 https 可能会被命令行参数覆写。
    有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
  • devServer.proxy
    如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。devServer.proxy 可以是一个指向开发环境 API 服务器的字符串
  • pluginOptions
    这是一个不进行任何 schema 验证的对象,因此它可以用来传递任何第三方插件选项。
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐