如何设置vite.config.js基础公共路径？

Question

我正在尝试为我的开发和生产环境设置一个base url，但是

vitejs

配置尚未解析。

根据 vitejs ，您可以在配置选项中设置在开发或生产中提供服务时的基本公共路径。

当从命令行运行 vite 时，Vite 会自动尝试解析项目根目录中名为 vite.config.js 的配置文件。

问题是我的应用程序请求没有通过

'http://localhost:8080/'

，但仍然附加到默认服务端口

http://localhost:3000/

。

我当前的配置如下：

// vite.config.js
export default {
  base: 'http://localhost:8080/'
}

// packages.json
{
  "name": "vue3ui",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    ...,
    "vue": "^3.0.11"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.11",
    "vite": "^1.0.0-rc.13"
  }
}

Answer 1

我不太清楚，但是我会尽力给你答案以实现你想要的。

我正在尝试为我的开发和生产环境设置一个基本 URL

编辑：我再次阅读了你的问题，我认为你正在寻找这个答案的要点C。

应在

vite.config.js

进行更改

A) 您希望将运行端口从

3000

更改为

8080

，调整

server.port

server: {
  port: '8080'
}

B) 但是，如果您希望在

localhost:3000

上运行并将请求转发到

localhost:8080

，那么您必须调整

server.proxy

server: {
    proxy: {
      '/': {
        target: 'http://localhost:8080/'
      },

      '/admin': {
        target: 'http://localhost:8081/'
      }
    }
  }

示例：

• '/'

  ：将所有请求代理到

  localhost:8080

• '/admin'

  ：仅代理以

  /admin

  为端点的请求到

  http://localhost:8081

C) 根据开发或生产环境更改基本路径

.env

文件：

// .env
 
// Running locally
APP_ENV=local
// you change port of local/dev here to :8000
// do not forget to adjust `server.port`
ASSET_URL=http://localhost:3000
 
// Running production build
APP_ENV=production
ASSET_URL=https://your-prod-asset-domain.com

vite.config.js

：

const ASSET_URL = process.env.ASSET_URL || '';

export default { 
  base: `${ASSET_URL}/dist/`,

  [...]
}

如果这不是您要找的内容，请更准确，我会编辑我的答案。

有关更多信息，请前往官方文档https://vitejs.dev/config/#server-options

Answer 2

我想我明白TC想要解决什么问题。 他有 1 个用于 dev 和 prod envs 的 build。

但这取决于envs，他有不同的基本路径。

答案： https://vitejs.dev/guide/build.html#advanced-base-options 目前这是一个实验性功能

experimental: {
  renderBuiltUrl(filename: string, { hostType }: { hostType: 'js' | 'css' | 'html' }) {
    if (['js', 'css'].includes(hostType)) {
      return { runtime: `window.__getFile(${JSON.stringify(filename)})` }
    } else {
      return { relative: true }
    }
  }
}

并创建全局函数

window.__getFile = function(file){
  if (window.location.host.includes('dev')) {
    return `http://cdn.dev/${file}`
  }
  return `http://cdn.prod/${file}`
}

P.s.对不起。我找不到任何有关端口的示例

Answer 3

只需弹出添加，如果您尝试自动打开的 URL 不是 localhost（因为您的应用程序配置了本地 URL 代理），请将 open 设置为字符串路径而不是布尔值，例如，

export default defineConfig({
  server: {
    open: 'https://mycustomlocalurl.io/basepath'
  }
})