使用vue.config.js

编程问答 2022-08-14

问题描述

我有一个SPA，可以将其部署为Web应用程序和作为Chrome浏览器扩展程序。

这两个“目标”共享90％的相同代码。

我想将每个目录构建为单独的dist目录，并确保它们不会提取与它们无关的代码。

我目前在vue.config.js中具有以下设置，但是我注意到它正在为每个目标引入 ALL 代码。它只是使用不同的入口文件和不同的输出目录。

const copyPlugin = require('copy-webpack-plugin');

if (process.env.VUE_APP_TARGET === 'web') {
  module.exports = {
    pages: {
      index: {
        entry: 'src/web.js',template: 'public/web/index.html',},};
}

if (process.env.VUE_APP_TARGET === 'ext') {
  module.exports = {
    outputDir: 'dist-ext',pages: {
      index: {
        entry: 'src/ext.js',template: 'public/ext/index.html',configureWebpack: {
      plugins: [
        new copyPlugin({
          patterns: [{ from: 'src/manifest.json',to: 'manifest.json' }],}),],};
}

如您所见，我正在使用Vue CLI pages功能。但是从他们的文档中，他们指出此功能适用于多页应用程序：

https://cli.vuejs.org/config/#pages

以多页模式构建应用

我的应用程序不是多页应用程序，而是SPA ...具有两个不同的目标，因此每个目标共享相同的代码，但也具有自己的代码。

什么是更好/更清洁的方法？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptvue-clivue.jswebpackwebpackwebpack