Vue - 删除生产模式的特定 JavaScript 文件

Question

我有很多 .js 文件要导入到我项目的 Vue 组件中。其中一些 JavaScript 文件用于开发模式，它们不会包含在生产中，但我不允许在项目中删除这些文件。例如;

有两个 JavaScript 文件，名为 authDev.js 和 authProd.js。它们的用法基本相同，但内容各不相同。在这些 JavaScript 文件中有函数，我将它们导出以便能够导入多个 Vue 组件。

第一个问题，如果我动态导出或导入它们，webpack会在我运行 npm run build时包含这些文件吗？换句话说，假设我创建了一个 JavaScript 文件，但我没有导出它，所以我也没有将它导入到任何地方。 webpack 是否知道这个 JavaScript 文件没有在这些 Vue 项目的任何地方使用，并在将我的项目构建到生产环境时丢弃它？或者它是否包括项目中存在的每个文件？

第二个问题，有没有办法告诉 webpack 这些 JavaScript 文件不会包含在 dist 文件夹中，这些文件会...我的意思是，我可以指定用于开发和生产的文件吗？

起初我以为我可以根据条件导入或导出它们，但是当我尝试将导入内容放入 if statements 时，它给了我一个错误并显示 "imports must be at the top level"。所以我尝试动态导出它们，但也做不到。

然后我尝试删除文件中的特定代码块。有一些包和插件可以从 Vue 项目中删除每个控制台输出，但我找不到任何可以删除或丢弃特定代码行的东西。

最后，我决定采用一种包含和排除特定文件的方法。有办法吗？如果是，我该怎么做？提前致谢。

解决方案（已编辑）

为了快速测试，我在 src/assets/js/filename.js 位置创建了两个名为 auth-development.js 和 auth-production.js 的 .js 文件。以下是它们的内容；

auth-production.js

export const auth = {
    authLink: "http://production.authlink/something/v1/",
    authText: "Production Mode"
}

auth-development.js

export const auth = {
    authLink: "http://localhost:8080/something/v1/",
    authText: "Development Mode"
}

然后我修改了 vue.config.js 文件中的 webpack 配置；

const path = require('path');

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
              'conditionalAuth': path.resolve(__dirname, `src/assets/js/auth-${process.env.NODE_ENV}.js`)
            }
          }
    }
  }

Vue 出现 "path is undefined" 错误，我添加了代码的顶部来处理该错误。我使用 process.env.NODE_ENV 来获取 development 和 production 来添加我的 javascript 文件的末尾，以便我可以定义它们的路径。

然后我将这个 conditionalAuth 动态导入到名为 "HelloWorld" 的测试组件中，如下所示；

<script>
import * as auth from 'conditionalAuth';

export default {
  name: 'HelloWorld',
  data(){
    return {
      auth: auth
    }
  }
}
</script>

我是这样用的；

<template>
  <div>
    <p>You are in the {{ auth.auth.authText}}</p>
    <p>{{ auth.auth.authLink }}</p>
  </div>
</template>

以这种方式，当我 npm run serve 它导入 auth-development.js 但如果我 npm run build 并尝试 index.html 在实时服务器上的 dist 文件夹中, 它只导入 auth-production.js.

最后，当我检查最终构建时，auth-development.js 不是为我的项目的 dist 版本构建的。它只导入块中的生产 javascript 文件。

Answer 1

假设文件名为：auth-development.js和auth-production.js，可以使用webpackalias根据环境导入文件

 resolve: {
    alias: {
      'conditionalAuth': path.resolve(__dirname, `path/to/js/auth-${process.env.NODE_ENV}.js`)
    },
    extensions: ['.js', '.vue', '.json']
  }

那么您应该可以导入所需的文件，例如：

import * as auth from 'conditionalAuth';

Vue - 删除生产模式的特定 JavaScript 文件

Vue - Remove specific JavaScript files for production mode

javascript

vue.js

webpack

dev-to-production

webpack-production