Vue CLI如何实现类似Webpack的脚本传参指定入口/页面？

方法1：通过带前缀的环境变量传递并动态配置入口 #

Vue CLI对自定义环境变量有前缀要求，必须以VUE_APP_开头才能被注入到项目环境中。

1. 修改package.json的scripts命令：

{
  "scripts": {
    "serve": "vue-cli-service serve --env VUE_APP_ENTRY=xxx",
    "build": "vue-cli-service build --env VUE_APP_ENTRY=xxx"
  }
}

这里的xxx是你要指定的入口文件名（比如home对应src/home.js）。

2. 在vue.config.js中动态配置入口：

module.exports = {
  pages: {
    index: {
      // 根据环境变量指定入口，默认用main.js兜底
      entry: process.env.VUE_APP_ENTRY ? `src/${process.env.VUE_APP_ENTRY}.js` : 'src/main.js'
    }
  }
}

方法2：直接解析命令行参数 #

如果不想用VUE_APP_前缀，可以直接在vue.config.js里解析process.argv提取自定义参数：

1. package.json的scripts保持简洁：

{
  "scripts": {
    "serve": "vue-cli-service serve --entry=xxx",
    "build": "vue-cli-service build --entry=xxx"
  }
}

2. 在vue.config.js中添加参数解析逻辑：

// 解析命令行中的entry参数
const getEntryParam = () => {
  const argv = process.argv.slice(2)
  const entryArg = argv.find(item => item.startsWith('--entry='))
  if (entryArg) {
    return entryArg.split('=')[1]
  }
  return 'main' // 默认入口
}

module.exports = {
  pages: {
    index: {
      entry: `src/${getEntryParam()}.js`
    }
  }
}

方法3：直接指定入口文件（最直接） #

不需要传环境变量，直接在命令行里指定要运行的入口文件路径：

npm run serve -- src/xxx.js
# 或者
yarn serve src/xxx.js

Vue CLI会直接以你指定的文件作为入口启动项目。

多页面场景的动态配置 #

如果是多页面应用，可以根据参数动态生成pages配置：

const entryName = process.env.VUE_APP_ENTRY || 'index'

module.exports = {
  pages: {
    [entryName]: {
      entry: `src/pages/${entryName}/main.js`,
      template: `public/${entryName}.html`
    }
  }
}

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