Vue.js 如何在构建vue项目时隐藏js文件

我有一个VUE2项目，在公用文件夹中创建了一个iframe.html文件，该文件将加载到iframe中

该iframe还将加载一个javascript.js文件，我希望在“npm运行构建”时对其进行编码/uglified，但我也希望能够在开发过程中访问该文件

我怎样才能继续

这个js文件是否应该放在/src/assets/文件夹中，并从iframe.html文件中引用？如果是，有什么建议吗

或者它应该保留在公共文件夹中，并对正在构建的dist文件夹进行upod，用一些东西对其进行编码

欢迎任何解决方案，提前感谢

编辑：以下是我如何使用iframe的更多详细信息。

首先，我在路由器中引用.vue文件，如下所示：

{
    path: "/pages/:id/edit",
    name: "edit",
    component: () => import("../views/Edit.vue"),
  },

接下来，在Edit.vue文件中，我像这样添加iframe（注意它是如何引用公共目录中的iframe.html的）：

接下来，在iframe.html中，它只是普通的html代码，这部分包括javascript.js文件（目前实际上也在公用文件夹中）

---

通过为UglifyJsPlugin添加规则，您可以将.js文件显式包含在您的网页配置中：

npm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...
module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        include: /\/regex-for-file/,
        minimize: true
      })
    ]
  }
  ...
};

在Vue.config.js中，这可能类似于：

configureWebpack: {           
  plugins : [
    new webpack.optimize.UglifyJsPlugin({ 
      uglifyOptions: { 
        include: /\/regex-for-file/,
        minimize: true
      }
    )}
  ]
}

另一种选择是使用丑陋的工具；这将允许您通过指定在生成期间从何处复制文件（假设您可能希望文件位于src/之外）来获得更明确的信息：

为了能够在开发期间访问它，您可以在配置中使用resolve.alias选项包含js文件的路径（相对于Vue src目录）（因此您不需要在项目中处理可能荒谬的相对路径）。最后，如果需要，您可以查看webpack的HTML插件文档，以获取有关导入外部index.HTML文件的信息

我建议不要把它放在静态；默认情况下，如果将其放置在该目录中，它将不会被缩小和构建

---

更新/编辑：对不起，我看到了一个“丑”字，我以为你想要丑js。只要脚本位于Vue项目目录中（或在Webpack配置中指定），则应在生成过程中缩小该文件。Vue对Webpack有非常智能的默认设置；假设iframe在应用程序中的某个位置被引用，即依赖关系图，它将被构建。

谢谢您的回答。首先，我对vue缩小脚本更感兴趣。我先用这种方法试试，但我还是被阻塞了。如果我将JS脚本（包含iframe的jQuery代码等）放在vueproject/src/文件夹中，如何将其与iframe.html文件（仍在/public文件夹中）一起引用？我将编辑我的第一个问题，以添加有关如何创建iframe等的更多详细信息。谢谢！

npm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...
module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        include: /\/regex-for-file/,
        minimize: true
      })
    ]
  }
  ...
};

configureWebpack: {           
  plugins : [
    new webpack.optimize.UglifyJsPlugin({ 
      uglifyOptions: { 
        include: /\/regex-for-file/,
        minimize: true
      }
    )}
  ]
}

npm i -D uglify-es // CopyWebpackPlugin ships w/ Vue's Webpack conf by default
const UglifyJS = require('uglify-es');
const { resolve } = require('path');

const resolveAbs = (dir) => resolve(__dirname, dir);


new CopyWebpackPlugin([
  {
    from: resolveAbs('../external'),
    to: config.build.assetsSubDirectory
  },
  {
    from: resolveAbs('../src/custom-build-path'),
    to: config.build.assetsServerDirectory,
    transform: (content, path) => UglifyJS.minify(content.toString()).code;
  }
]),