如何覆盖 vue cli-service 入口设置答案

【问题标题】：how to override vue cli-service entry settings如何覆盖 vue cli-service 入口设置
【发布时间】：2019-11-06 08:18:09
【问题描述】：

我正在尝试将使用 vue cli 构建的 vue 项目集成到现有的 .net 应用程序中。我对 vue 很陌生，所以我正在尝试遵循指南等，但还有很多问题。

在尝试编译时，我发现 vue cli-service 节点模块具有以下内容，用于设置位于其 base.js 文件中的 main.js 文件。

webpackConfig
  .mode('development')
  .context(api.service.context)
  .entry('app')
    .add('./src/main.js')
    .end()
  .output
    .path(api.resolve(options.outputDir))
    .filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
    .publicPath(options.publicPath)

我需要覆盖它，因为我的 .net 应用程序没有 src 目录，并且这个 vue 应用程序的使用不会遵循那个路径结构。我没有在我的 vue.config.js 文件中看到这样做的方法。我希望如果我可以覆盖它，那将是现场。

我可以覆盖它存在的 base.js 文件，但是当同事运行 npm install 时，他们会得到默认值而不是我拥有的值。我看到的唯一选择是将所有节点模块签入 git，这是我们真的不想做的。

【问题讨论】：

标签： vue.js webpack vue-cli-3

【解决方案1】：

对于处于类似情况的任何人，我找到了适合我的方法。这不是理想的解决方案，因为它会强制您构建到 js 文件夹中。这导致文件被放入 Scripts\build\vue\js.能够将它转储到 vue 文件夹中会很好，但至少这是可行的。代码如下。

vue.config.js

module.exports = {
  publicPath : "/",
  outputDir: "Scripts/build/vue", //where to put the files

  // Modify Webpack config
  // https://cli.vuejs.org/config/#chainwebpack
  chainWebpack: config => {
    // Not naming bundle 'app'
    config.entryPoints.delete('app'); //removes what base.js added
  },

  // Overriding webpack config
  configureWebpack: {
    // Naming bundle 'bundleName'
    entry: {
      quote: './Scripts/Quote/index.js' //where to get the main vue app js file
    },
    optimization: {
      splitChunks: false
    }
  },
  filenameHashing: false,
  pages: {
    quoteApp: { //by using pages, it allowed me to name the output file quoteApp.js
      entry: './Scripts/Quote/index.js',
      filename: 'index.html'
    }
  }
}

【讨论】：