在 vue 中导入对象 js 并从捆绑中排除此文件答案

【问题标题】：Import object js in vue and exclude this file from bundling在 vue 中导入对象 js 并从捆绑中排除此文件
【发布时间】：2019-11-30 08:58:31
【问题描述】：

我从简单的 vue.js 应用程序开始。我有 base64 格式的图标，并将它们作为对象放在单独的文件 icons.js 中。我想将此对象作为全局常量导入到文件 globals.js 中，并在我需要图标的所有地方使用此常量。但是，这个文件不需要捆绑。

我有文件 icons.js、globals.js、main.js、App.vue。

icons.js：

export const iconsData =
{
  "large": {
    "2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAA3CAYAAAD6+O8NAAAAGXRFWHRTb2Z0d2FyZQB",
    "3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwE",
   "777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAUCAYAAAAJD/ojAAAAGXRFWHRTb2Z0d2FyZQB"
  },
  "small": {
    "2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAARCAYAAABjEtTjAAAAGXRFWHRTb2Z0d2F",
    "3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAAqCAYAAAAJWvOwAAAAGXRFWHRTb2Z0d2Fy",
    "777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAqCAYAAADMKGkhAAAAGXRFWHRTb2Z0d2",

  }
};

globals.js：

import { iconsData } from './assets/icons'


export const icons = {
    getIcon: function (iconNumber) {
            if (!iconsData.large[iconNumber]) {
                return "";
            } else {
                return iconsData.large[iconNumber];
            }
    },
    isIcon:function (iconNumber) {
            return iconsData.large[iconNumber];


    }
};

在我的 App.vue 中：

<template>
  <div id="app">

    <div v-for="channel in channels">


      <div class="icon" >

        <img v-if="icons.isIcon(channel.number)" :src="icons.getIcon(channel.number)" >
        <div v-if="!icons.isIcon(channel.number)" class="channel-name">{{channel.name}}</div>

      </div>

        </div>

  </div>
</template>

<script>

import {icons} from "./globals"


export default {
  name: 'app',
  components: {   
  },
  data() {
    return {         
          icons: icons,

        }
  },

}
</script>

我试过了 1) Vue.js exclude settings file from being bundled - 不适合我

2)Exclude json file from being bundled in Vue 来自官方文档我的文件在资产中，但是如果我在 global.js 中放置绝对路径 import { iconsData } from '/assets/icons' - 应用程序未编译。也许这不对 - 将图标导入为 const global？我可以做些什么来单独留下文件icons.js？

【问题讨论】：

标签： vue.js vue-cli-3

【解决方案1】：

我想您正在使用 webpack 进行构建，因为您已使用 VueCLI 标记了问题。如果您不希望捆绑图标数据，那么您需要向 webpack 包含这样的提示，即图标数据应位于与您的应用程序包不同的块中。这样的事情应该可以工作：

const iconsData = import('./assets/icons').then(icons => icons.iconsData);

您还可以自定义块的名称。假设您希望将其命名为icons-data，那么您可以这样做：

const iconsData = import(/* webpackChunkName: "icons-data" */ './assets/icons').then(icons => icons.iconsData);

【讨论】：

在我将文件 global.js 更改为 const iconsData = import('./assets/icons').then(icons => icons.iconsData);收到错误类型错误：无法读取未定义的属性“1”

【解决方案2】：

这样解决了问题：

1) 从icons.js字导出中删除

const iconsData =
{
  "large": {
    "2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAA3CAYAAAD6+O8NAAAAGXRFWHRTb2Z0d2FyZQB",
    "3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwE",
   "777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAUCAYAAAAJD/ojAAAAGXRFWHRTb2Z0d2FyZQB"
  },
  "small": {
    "2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAARCAYAAABjEtTjAAAAGXRFWHRTb2Z0d2F",
    "3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAAqCAYAAAAJWvOwAAAAGXRFWHRTb2Z0d2Fy",
    "777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAqCAYAAADMKGkhAAAAGXRFWHRTb2Z0d2",

  }
};

2) 从 globals.js 导入中删除

export const icons = {
    getIcon: function (iconNumber) {
            if (!iconsData.large[iconNumber]) {
                return "";
            } else {
                return iconsData.large[iconNumber];
            }
    },
    isIcon:function (iconNumber) {
            return iconsData.large[iconNumber];


    }
};

3) 在 index.html 中添加对 icons.js 的引用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Icons</title>
  <script type="text/javascript" src="<%= BASE_URL %>icons.js"></script>

  </head>
  <body>
    <noscript>
      <strong>We're sorry but egg doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4) 将文件 icons.js 复制到 public 文件夹和 src 根目录

我怎么理解 - 这种方式以“老派”方式从 webpack 中排除文件。如何使用 webpack 做到这一点 - 我不明白。

【讨论】：