项目中vue.config.js`配置文件代码解析

const path = require('path');

const port = 8800

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: '/tslSAAS',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  runtimeCompiler: true,
  devServer: {
    host: '0.0.0.0',
    port: port,
    open: false,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/cxapi': {
        target : 'https://testapi.shengshidalian.cn',
        changeOrigin: true,
        pathRewrite: {
          "^/cxapi": "",
        },
      }
    },
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [
        path.resolve(__dirname, './src/assets/css/var.scss')
      ]
    }
  }
}

这段代码片段是一个 Vue.js 项目的 vue.config.js 配置文件。这个文件通常用于修改 Vue CLI 创建的项目的默认配置。

让我们逐行解析一下这个配置文件的内容：

• publicPath: '/tslSAAS': 此选项指定了在浏览器中被引用的输出文件的公共 URL 地址。在这里，所有的资源将被引用为 /tslSAAS/[filename]。

• outputDir: 'dist': 这是生成的生产环境构建文件的目录。默认值是 dist。

• assetsDir: 'static': 这是放置生成的静态资源 (js、css、img、fonts) 的目录。默认值是 static。

• lintOnSave: false: 这指定了在保存文件时是否使用 ESLint 进行代码检查。这里设置为 false，意味着在保存时不进行代码检查。

• productionSourceMap: false: 这指定了在生产构建中是否生成 source map。这里设置为 false，意味着不生成 source map。

• runtimeCompiler: true: 这指定了是否包含运行时编译器。设置为 true 将会包含运行时编译器，这意味着你可以在任何组件文件中即时编译模板。

• devServer: 这是一个对象，包含了开发服务器的配置选项。

  • host: '0.0.0.0': 这指定了开发服务器监听的主机。这里设置为 '0.0.0.0'，意味着它将监听所有可用的网络接口。

  • port: port: 这指定了开发服务器监听的端口。这里的 port 变量应该在其他地方定义。

  • open: false: 这指定了在服务器启动时是否自动打开浏览器。这里设置为 false，意味着不会自动打开浏览器。

  • overlay: 这是一个对象，用于配置在浏览器覆盖显示编译警告和错误。

    • warnings: false: 这指定了是否在浏览器覆盖显示编译警告。这里设置为 false，意味着不显示编译警告。
    • errors: true: 这指定了是否在浏览器覆盖显示编译错误。这里设置为 true，意味着显示编译错误。

  • proxy: 这是一个对象，用于配置开发服务器的代理规则。

    • /cxapi: 这是一个对象，用于配置针对 /cxapi 路径的代理规则。

      • target: 'https://testapi.shengshidalian.cn': 这指定了代理的目标服务器地址。所有 /cxapi 路径的请求都将被代理到这个地址。
      • changeOrigin: true: 这指定了在转发请求时是否更改主机头为目标 URL。这里设置为 true，意味着会更改主机头。
      • pathRewrite: 这是一个对象，用于重写请求路径。这里将 /cxapi 路径重写为空路径，意味着在转发请求时会去掉 /cxapi 路径前缀。

总体来说，这个配置文件主要用于配置开发服务器的行为，包括监听的主机和端口、是否自动打开浏览器、是否在浏览器覆盖显示编译警告和错误、以及代理规则等。