Question

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

我根据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文件：

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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

编辑：@evetterdrake告诉我，使用vue-cli设置Vuetify项目时，resolve配置属性位于module属性之后，这与设置时不同一个正常的Webpack项目。

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

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

我的项目结构：

我的webpack.config.js文件：

1 个答案: