vue 根目录配置ip vue.config.js

### 设置 Vue 项目中的公共基础 URL 和 IP 地址

在 `vue.config.js` 文件中配置公共基础 URL 可以通过修改 `publicPath` 属性实现。对于设置 IP 地址以及处理开发服务器的相关属性，则主要涉及 `devServer` 对象下的多个参数。

#### 修改 publicPath 实现公共基础 URL 配置

当构建应用时，Vue CLI 使用 `publicPath` 来决定应用程序的部署路径。默认情况下，此值被设为 `'/'` 表示相对路径。如果希望指定一个固定的域名或子路径作为公共资源的基础 URL，可以在 `vue.config.js` 中调整该选项：

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/prod-sub-path/'
        : '/'
};

上述代码片段展示了根据不同环境变量动态设定不同 `publicPath` 值的方法[^2]。

#### 开发服务器配置 (含 IP)

为了让本地开发服务监听特定 IP 并提供跨域支持，在同一文件内还可以进一步定制 `devServer` 参数:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        allowedHosts: [
            '.example.com' // 允许来自 example.com 的请求访问开发服务器
        ],
        proxy: {
            '/api': {
                target: 'http://localhost:3000/',
                changeOrigin: true,
                pathRewrite: { '^/api': '' }
            }
        }
    }
})

这里设置了开发服务器监听所有网络接口 (`host: '0.0.0.0'`) ，并开放了端口 8080 。同时启用了代理功能用于解决前后端分离架构下常见的 CORS 问题[^3]。