如何在没有webpack加载器的情况下使用Vue组件?

问题描述 投票:0回答:1

从Vue.js开始,我已经使用此配置建立了基本的Webpack构建:

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    devServer: {
        hot: true,
        contentBase: path.join(__dirname, 'dist'),
        host: '0.0.0.0',
        port: 9000
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    }
}

到目前为止很好,但是当我在唯一的index.js中创建第一个组件时,在浏览器中出现此错误:

Uncaught Error: Module parse failed: Unexpected token (33:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| Vue.component('weather-display', {
|     props: ['name', 'results', 'images']
>     data: function () {
|         return {
|             name: 'My Entry',
    at eval (webpack:///./src/index.js?:1)
    at Object../src/index.js (main.js:1188)
    at __webpack_require__ (main.js:727)
    at fn (main.js:101)
    at eval (webpack:///multi_(:9000/webpack)-dev-server/client?:3:18)
    at Object.0 (main.js:1199)
    at __webpack_require__ (main.js:727)
    at main.js:794
    at main.js:797

到目前为止,在文档中,关于此加载器的内容未提及,因此我有些困惑。我是否正确理解了这一点,即从上至下阅读文档时,这是我不使用任何构建系统的基本假设,而是将所有内容都放在一个HTML文件中才能正常工作?我也不想立即创建单个文件组件,现在可以使用单个Javascript文件了。是否有一种简单的方法可以在不使用vue-cli的情况下将此加载程序添加到我的Webpack中,这是我想避免的?

UPDATE:将vue-loader添加到我的Webpack配置中后,我仍然遇到相同的错误。

javascript vue.js webpack
1个回答
0
投票

您需要vue-loader插件-https://github.com/vuejs/vue-loader

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  ...
  module: {
    ...
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

您可能还需要vue-template-compilervue-style-loader

© www.soinside.com 2019 - 2024. All rights reserved.