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

Question

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

我根据本教程的说明设置了路由器。 在一些摆弄之后，我通过改变导入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' } 

Answer 1

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

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

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

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

---

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

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