Home Articles

使用Webpack的VueJS:导入和导出未按预期工作

Asked
Viewed 1009 times
6

我启动了一个新的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 extension


我的项目结构:

-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'
}

1 Answer

  • 3

    您正在尝试从名为 @alias目录加载文件 . 但是在您的webpack配置文件中,您尚未定义该别名 .

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

    webpack.config.js 文件中,添加要解析的扩展列表和名为 @ 的别名,该别名映射到 src 目录:

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

    编辑:@evetterdrake通知我,当使用 vue-cli 设置Vuetify项目时, resolve 配置属性位于 module 属性之后,这与设置普通Webpack项目时不同 .

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

Related