Question

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

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

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

..遵循解释here的网址转换规则。我的（部分）文件夹结构是：

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>

Answer 1

如果您正在使用webpack。还有另一种方法可以使用ProvidePlugin将jQuery包含为全局变量。您可以添加到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
  },
  ...

包含模块

1 个答案: