Question

我正在尝试将使用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，这是我们真正不想做的。

Answer 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'
    }
  }
}

如何覆盖Vue CLI服务条目设置

1 个答案: