2

我的项目中有很多.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 项目中删除每个控制台输出，但我找不到任何东西可以删除或丢弃特定的代码行。

最后，我决定采取一种方法来包含和排除特定文件。有没有办法做到这一点？如果是，我该怎么做？提前致谢。

解决方案（已编辑）

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

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 文件。

4

1 回答 1

3

假设文件名为:auth-development.js和，则可以根据环境auth-production.js使用webpack导入文件。alias

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

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

import * as auth from 'conditionalAuth';
于 2021-08-19T20:10:01.937 回答