001 vue.config相关

const proxyURL = require("./src/common/proxy-config").proxyURL;
const baseURL = require('./src/common/proxy-config').baseURL;
const path = require('path');

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

module.exports = {
assetsDir: "static",
productionSourceMap: false,
devServer: {
host: '0.0.0.0',
port: 8890, // 端口号
proxy: {
[baseURL]: {
target: proxyURL,
changeOrigin: true,
autoRewrite: true,
},
},
},
};
当然，下面是对这段 vue.config.js 配置文件的详细分析，包括每个部分的作用和实现逻辑。

1. 引入模块和变量

const proxyURL = require("./src/common/proxy-config").proxyURL;
const baseURL = require('./src/common/proxy-config').baseURL;
const path = require('path');

• proxyURL 和 baseURL：

  • 这两个变量是从 ./src/common/proxy-config 模块中导入的。假设 proxy-config.js 文件内容如下：

    module.exports = {
      proxyURL: 'http://api.example.com',
      baseURL: '/api'
    };
    

  • proxyURL 是目标服务器的 URL，例如 http://api.example.com。
  • baseURL 是需要代理的路径前缀，例如 /api。

• path 模块：

  • path 是 Node.js 的内置模块，用于处理和转换文件路径。

2. 辅助函数 resolve

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

• resolve 函数：
  • 这个函数用于将相对路径转换为绝对路径。
  • __dirname 是 Node.js 的全局变量，表示当前模块的目录名。
  • path.join(__dirname, dir) 将当前模块的目录名与传入的相对路径 dir 连接起来，生成一个绝对路径。

3. 配置对象 module.exports

module.exports = {
  assetsDir: "static",
  productionSourceMap: false,
  devServer: {
    host: '0.0.0.0',
    port: 8890, // 端口号
    proxy: {
      [baseURL]: {
        target: proxyURL,
        changeOrigin: true,
        autoRewrite: true,
      },
    },
  },
};

• assetsDir: "static"：

  • 指定生成的静态资源目录为 static。这意味着在构建项目时，所有的静态资源（如图片、字体等）将会被放置在 dist/static 目录下。

• productionSourceMap: false：

  • 生产环境下不生成 source map。source map 用于调试，但在生产环境中生成 source map 会增加打包体积和构建时间，通常不需要。

• devServer：

  • 配置开发服务器的设置。
  • host: '0.0.0.0'：
    • 允许外部设备通过局域网访问开发服务器。0.0.0.0 表示监听所有网络接口。
  • port: 8890：
    • 开发服务器运行的端口号为 8890。
  • proxy：
    • 配置代理，用于解决开发环境下的跨域问题。
    • [baseURL]：
      • 动态生成代理路径。baseURL 是一个变量，假设其值为 /api，则代理配置为 { '/api': { ... } }。
    • target: proxyURL：
      • 目标服务器的 URL。假设 proxyURL 的值为 http://api.example.com，则所有匹配 /api 的请求都会被代理到 http://api.example.com。
    • changeOrigin: true：
      • 改变请求头中的 host 为 target。这有助于解决跨域问题，因为目标服务器会认为请求来自同一个域名。
    • autoRewrite: true：
      • 自动重写路径。如果目标服务器返回的响应中包含相对路径，这些路径会被自动重写为代理路径。

总结

这段 vue.config.js 配置文件的主要作用是：

1. 引入必要的模块和变量：从 proxy-config.js 文件中导入 proxyURL 和 baseURL，并引入 path 模块。
2. 定义辅助函数：resolve 函数用于将相对路径转换为绝对路径。
3. 配置开发服务器：
   • 指定静态资源目录。
   • 关闭生产环境下的 source map。
   • 配置开发服务器的主机和端口。
   • 设置代理，解决开发环境下的跨域问题。

通过这些配置，你可以确保在开发过程中能够顺利地访问后端 API，而无需担心跨域问题。