vue.js - vue+webpack报错

问题描述

问 题

用vue+webpack搭建项目 尝试组件化的开发 可是在使用自定义组件的时候出错

代码
index.js

import Vue from 'Vue'
import Favlist from '../components/Favlist' //相对路径和绝对路径 ../是上一层 ./是所在目录 /是根目录

var app1 = new Vue({
    el: '#app1',
    components: {
        Favlist
    }
})

FavList.vue

<template>
    <p>{{msg}}</p>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Hello World!'
            }
        }
    }
</script>

<style>
    html{
        background: #666;
    }
</style>

webpack.config.js

// nodejs 中的path模块
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
    entry: path.resolve(__dirname, '../app/index/index.js'),
    // 输出配置
    output: {
        // 输出路径是 myProject/output/static
        path: path.resolve(__dirname, '../output/static'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[id].[chunkhash].js'
    },
    resolve: {
        extensions: ['.js', '.vue']
    },
    module: {

        loaders: [
            // 使用vue-loader 加载 .vue 结尾的文件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                },
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'app/index/index.html',
            template: path.resolve(__dirname, '../app/index/index.html'),
            inject: true
        })
    ]
}

webpack.dev.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
// 引入基本配置
var config = require('./webpack.config');

config.output.publicPath = '/';

config.plugins = [
    new HtmlWebpackPlugin({
        filename: 'app/index/index.html',
        template: path.resolve(__dirname, '../app/index/index.html'),
        inject: true
    })
];

module.exports = config;

dev-server.js

// 引入必要的模块
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.dev.config')

// 创建一个express实例
var app = express()

// 调用webpack并把配置传递过去
var compiler = webpack(config)

// 使用 webpack-dev-middleware 中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    }
})

// 注册中间件
app.use(devMiddleware)

// 监听 8888端口，开启服务器
app.listen(8888, function (err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('Listening at http://localhost:8888')
})

解决方案

根据 vue npm 包的 package.json： "main": "dist/vue.runtime.common.js",，import Vue from 'vue' 默认使用的是 runtime 的 Vue，因此要在 webpack.config.js 中添加 resolve.alias，或者在 new Vue 中添加 render function。

modules.exports = {
  // other options
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      // other alias
    },
    // other resolve options
  }
}

建议安装并运行 vue-cli，使用 webpack 项目模板创建项目，然后认真研读该项目中的各种配置，最好要达到明白所有配置选项的程度。

这篇关于vue.js - vue+webpack报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！