时间戳

首页 > 解决方案 > 包括来自模块的静态资产

vue.js - 包括来自模块的静态资产

问题描述

我正在尝试（截至目前）最新版本的 vue-cli，但在导入静态资产时遇到了问题。我的设置几乎是一个默认的新项目，只选择了 vuex，我的第一个目标是获得一个运行语义 ui 的无聊模板。这也意味着 jQuery 的语义 ui 取决于它。

为此，我将此脚本部分添加到主 App.vue

<script>
    require('~/jquery/dist/jquery.min.js');
    require('./semantic/dist/semantic.js');
</script>

..遵循此处解释的 URL 转换规则。我的（部分）文件夹结构是：

node_modules
    jquery
        dist
            jquery.min.js
src
    semantic
        dist
            semantic.min.js

运行npm run serve确实找到语义但不是 jquery。有人能告诉我为什么这种包含静态资产的提议方法在这种情况下不起作用吗？

编辑澄清：我的问题是关于这个建议的导入方法和 URL 转换规则。对于任何需要某种方法来使其工作的人，我目前正在使用它作为解决方法：

<script>
    import jQuery from 'jquery';
    window.$ = window.jQuery = jQuery;
    require('./semantic/dist/semantic.js');
    export default {
    }
</script>

标签： vue.jsvuejs2

解决方案

如果您正在使用webpack. 还有另一种方法可以使用 jQuery 将 jQuery 作为全局变量ProvidePlugin。您可以添加到您的webpack.base.conf.js

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
}

如果您使用的是 Eslint，则需要添加.eslintrc.js 

module.exports = {
  globals: {
    "$": true,
    "jQuery": true
  },
  ...

推荐阅读