草庐IT

javascript - 带有 Webpack 的 VueJS : imports and exports not working as expected

coder 2025-01-05 原文

我启动了一个新的 Vuetify/Webpack 项目，并尝试通过 vue init vuetify/webpack 设置项目后实现 vue-router。

我根据 this tutorial 中的说明设置路由器.经过一些摆弄后，我通过更改导入 Vue 组件的方式使其正常工作。

在我的 router/index.js 文件中:

// works for me
import Main from '../components/Main.vue'

// does NOT work; from the tutorial
import Main from '@/components/Main'

我的问题是，为什么我必须相对导入我的 Main.vue 文件并在导入时包含 .vue 扩展名？

我的项目结构:

-node_modules/
-public/
-src/
|-components/
||-Main.vue
|-router/
||-index.js
|-App.vue
|main.js
-index.html
-package.json
-webpack.config.js

我的 webpack.config.js 文件:

var path = require('path')
var webpack = require('webpack')
 
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolve: {
    alias: {
      'public': path.resolve(__dirname, './public')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          objectAssign: 'Object.assign'
        }
      },
      {
        test: /\.styl$/,
        loader: ['style-loader', 'css-loader', 'stylus-loader']
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

最佳答案

您正在尝试从 alias 加载文件名为 @ 的目录。但是在你的 webpack 配置文件中，你还没有定义那个别名。

此外，您还需要指定 .vue 扩展名，因为您尚未将其添加到可解析的 extensions 中。在配置对象的 resolve 属性中。

在您的 webpack.config.js 文件中，添加要解析的扩展列表和一个名为 @ 的别名，它映射到您的 src目录:

resolve: {
  extensions: ['', '.js', '.vue'],
  alias: {
    '@': path.resolve(__dirname, './src'),
    ...
  }
  ...
}

编辑:@evetterdrake 告诉我，当使用 vue-cli 通过 Vuetify 设置项目时，resolve 配置属性位于 module 属性，这与设置普通 Webpack 项目时不同。

请务必将这些配置选项添加到现有的 resolve 属性中，否则它将被覆盖并被忽略。

关于javascript - 带有 Webpack 的 VueJS : imports and exports not working as expected，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44163578/

javascriptexpectedcode39resolvevue.jsvuejs2vue-routervuetify.js

有关javascript - 带有 Webpack 的 VueJS : imports and exports not working as expected的更多相关文章

  1. ruby-on-rails - 带有 Zeus 的 RSpec 3.1，我应该在 spec_helper 中要求 'rspec/rails' 吗？ - 2

    使用rspec-rails3.0+，测试设置分为spec_helper和rails_helper我注意到生成的spec_helper不需要'rspec/rails'。这会导致zeus崩溃:spec_helper.rb:5:in`':undefinedmethod`configure'forRSpec:Module(NoMethodError)对thisissue最常见的回应是需要'rspec/rails'。但这是否会破坏仅使用spec_helper拆分rails规范和PORO规范的全部目的？或者这无关紧要，因为Zeus无论如何都会预加载Rails？我应该在我的spec_helper中做

  2. Ruby:如何使用带有散列的 'send' 方法调用方法？ - 2

    假设我有一个类A，里面有一些方法。假设stringmethodName是这些方法之一，我已经知道我想给它什么参数。它们在散列中{'param1'=>value1,'param2'=>value2}所以我有:params={'param1'=>value1,'param2'=>value2}a=A.new()a.send(methodName,value1,value2)#callmethodnamewithbothparams我希望能够通过传递我的哈希以某种方式调用该方法。这可能吗？ 最佳答案 确保methodName是一个符号，而

  3. ruby-on-rails - 带有 Pry 的 Rails 控制台 - 2

    当我进入Rails控制台时，我已将pry设置为加载代替irb。我找不到该页面或不记得如何将其恢复为默认行为，因为它似乎干扰了我的Rubymine调试器。有什么建议吗？ 最佳答案 我刚发现问题，pry-railsgem。忘记了它的目的是让“railsconsole”打开pry。 关于ruby-on-rails-带有Pry的Rails控制台，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/question

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. 带有 attr_accessor 的类上的 Ruby instance_eval - 2

    我了解instance_eval和class_eval之间的基本区别。我在玩弄时发现的是一些涉及attr_accessor的奇怪东西。这是一个例子:A=Class.newA.class_eval{attr_accessor:x}a=A.newa.x="x"a.x=>"x"#...expectedA.instance_eval{attr_accessor:y}A.y="y"=>NoMethodError:undefinedmethod`y='forA:Classa.y="y"=>"y"#WHATTT?这是怎么回事:instance_eval没有访问我们的A类(对象)然后它实际上将它添加到

  6. ruby-on-rails - Rails 渲染带有驼峰命名法的 json 对象 - 2

    我在一个简单的RailsAPI中有以下Controller代码:classApi::V1::AccountsControllerehead:not_foundendendend问题在于，生成的json具有以下格式:{id:2,name:'Simpleaccount',cash_flows:[{id:1,amount:34.3,description:'simpledescription'},{id:2,amount:1.12,description:'otherdescription'}]}我需要我生成的json是camelCase('cashFlows'而不是'cash_flows'

  7. ruby-on-rails - 在 Ruby 或 Rails 中，hash.merge({ :order => 'asc' }) can return a new hash with a new key. 什么可以返回带有已删除键的新散列？ - 2

    在Ruby(或Rails)中，我们可以做到new_params=params.merge({:order=>'asc'})现在new_params是一个带有添加键:order的散列。但是是否有一行可以返回带有已删除key的散列？线路new_params=params.delete(:order)不会工作，因为delete方法返回值，仅此而已。我们必须分3步完成吗？tmp_params=paramstmp_params.delete(:order)returntmp_params有没有更好的方法？因为我想做一个new_params=(params[:order].blank?||para

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby-on-rails - 从带有 ruby​​ on rails 的网站获取 html - 2

    如何使用ruby​​onrails获取网络上某处其他网站的页面数据？ 最佳答案 您可以使用httparty只是获取数据示例代码(来自example):requireFile.join(dir,'httparty')require'pp'classGoogleincludeHTTPartyformat:htmlend#google.comredirectstowww.google.comsothisislivetestforredirectionppGoogle.get('http://google.com')puts'','*'*7

  10. ruby-on-rails - 使用模块扩展带有 "has_many"的插件中的模型 - 2

    我在引擎样式插件中有一些代码，其中包含一些模型。在我的应用程序中，我想扩展其中一个模型。通过在初始值设定项中包含一个模块，我已经设法将实例和类方法添加到相关模型中。但是我似乎无法添加关联、回调等。我收到“找不到方法”错误。/libs/qwerty/core.rbmoduleQwertymoduleCoremoduleExtensionsmoduleUser#InstanceMethodsGoHere#ClassMethodsmoduleClassMethodshas_many:hits,:uniq=>true#nomethodfoundbefore_validation_on_crea

随机推荐