Vue Cli 3：vue.config.js配置文件

 

Vue Cli 3生成的项目结构，没有build、config目录，而是使用vue.config.js来进行配置。

 

vue.config.js 是一个可选的配置文件，若是项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

你也能够使用 package.json 中的 vue 字段，可是注意这种写法须要你严格遵守 JSON 的格式来写。

 

一 查看Vue Cli版本

 

vue --version

3.5.1

 

二 建立vue.config.js配置文件

 

module.exports = {
  // baseUrl从 Vue CLI 3.3 起已弃用，请使用publicPath
  // 默认状况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。
  // 若是应用被部署在一个子路径上，你就须要用这个选项指定这个子路径。例如，若是你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
  publicPath:
    process.env.NODE_ENV === "production" ? "/production-sub-path/" : "/",
  // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
  // 注意目标目录在构建以前会被清除 (构建时传入 --no-clean 可关闭该行为)。
  // 默认值'dist'
  outputDir: "my-app",
  // 放置生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir目录)。
  // 默认值''
  assetsDir: "assets",
  //指定生成的 index.html 的输出路径 (相对于 outputDir)。也能够是一个绝对路径。
  // 默认值'index.html'
  indexPath: "myIndex.html",
  // 默认状况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。
  filenameHashing: false,
  // 是否在开发环境下经过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装以后生效。
  lintOnSave: process.env.NODE_ENV !== "production",

  //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就能够在 Vue 组件中使用 template 选项了，可是这会让你的应用额外增长 10kb 左右。
  runtimeCompiler: false,

  // 若是你不须要生产环境的 source map，能够将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,

  // 全部 webpack-dev-server 的选项都支持。
  devServer: {
    host: "localhost",
    port: 8080, // 端口号
    https: false,
    open: true, //配置自动启动浏览器

    // 配置多个代理
    proxy: {
      "/api": {
        target: "http://localhost:3000", // 本地模拟数据服务器
        changeOrigin: true,
        pathRewrite: {
          "^/api": "" // 去掉接口地址中的api字符串
        }
      },
      "/foo": {
        target: "http://localhost:8080", // 本地模拟数据服务器
        changeOrigin: true,
        pathRewrite: {
          "^/foo": "" // 去掉接口地址中的foo字符串
        }
      }
    }
  }
};