Vue.js应用如何传入并读取自定义命令行参数？

一、修改启动命令，添加自定义参数 #

在现有启动命令的--后直接追加--backendHost <你的后端地址>即可，比如：

npm run --prefix frontend dev -- --host frontendHostName --port frontendPortNumber --backendHost http://192.168.1.100:5000

注：--是用来分隔npm命令和传给Vite的参数的，所有自定义参数必须放在--之后。如果后端地址包含特殊字符或空格，可以用引号包裹，比如--backendHost "http://my-backend:5000/api"。

二、在Vite配置中解析参数并注入全局 #

Vue3项目默认用Vite构建，我们需要在项目根目录的vite.config.js中解析命令行参数，并把后端地址注入到代码可访问的位置：

方式1：手动解析参数（无额外依赖）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 从命令行参数中提取backendHost，没传则用默认值
function getBackendHost() {
  const args = process.argv.slice(2)
  const hostIndex = args.indexOf('--backendHost')
  // 找到参数且后面有值就返回，否则用默认地址
  return hostIndex !== -1 && args[hostIndex + 1] ? args[hostIndex + 1] : 'http://localhost:1234/'
}

export default defineConfig({
  plugins: [vue()],
  // 定义全局变量，编译时会替换成对应值
  define: {
    '__BACKEND_HOST__': JSON.stringify(getBackendHost())
  }
})

方式2：用minimist简化解析（需额外安装依赖）

如果觉得手动解析麻烦，可以安装minimist库来处理命令行参数：

npm install minimist --save-dev

然后修改vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import minimist from 'minimist'

// 解析命令行参数
const args = minimist(process.argv.slice(2))

export default defineConfig({
  plugins: [vue()],
  define: {
    '__BACKEND_HOST__': JSON.stringify(args.backendHost || 'http://localhost:1234/')
  }
})

三、在main.js中配置Axios的baseURL #

打开项目的src/main.js，直接使用我们注入的全局变量设置Axios：

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)
// 用全局变量设置baseURL
axios.defaults.baseURL = __BACKEND_HOST__
// 把Axios挂载到Vue实例上，方便组件内使用
app.config.globalProperties.$axios = axios

app.mount('#app')

四、验证效果 #

启动前端后，打开浏览器控制台，输入axios.defaults.baseURL，就能看到是否成功读取到命令行传入的后端地址了。

内容的提问来源于stack exchange，提问作者tabina