错误信息
89cfd7481a3e344ddd8da2f7de6fe105.png
index.html
<body >
<div id="app">
<router-view></router-view>
</div>
</body>
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import { configRouter } from './router-config';
//初始化
Vue.use(VueRouter);
const router = new VueRouter({});
configRouter(router);
const App = Vue.extend({});//根組件
router.start(App, '#app');
window.router = router;
router-config.js
export function configRouter(router) {
router.map({
'/':
{
component: require('./components/onlineIndex.vue') }
})
}```
###onlineIndex.vue
<template>
<h1>测试.........</h1>
<template>
###webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = {
devServer: {
hot: true, contentBase: './dist',
progress: true,
inline: true,
historyApiFallback: true
},
entry:{
main:path.resolve(__dirname, './dist/main.js'), //第三方插件单独打包 vendors: ['./dist/lib/bootstrap.min.js','./dist/lib/parsley/parsley.js']
},
output:{
path:__dirname + '/build', publicPath: '/', filename:'./[name].js'
},
module:{
loaders:[
{test: /.js[x]?$/,exclude: /node_modules|vue/dist|vue-router/|vue-loader/|vue-hot-reload-api//,loader: 'babel'},
{test: /.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
{test: /.(jpg|png|gif)$/,loader: 'url?limit=90000'},
{test: /.woff[2]?$/, loader: "url?limit=10000&minetype=application/font-woff"},//url-loader {test: /.ttf$/, loader: "file"},
{test: /.eot$/, loader: "file"},
{test: /.svg$/, loader: "file"},
{test: /.vue$/, loader: 'vue'}
] },
plugins:[
new ExtractTextPlugin("main.css"),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
] }
module.exports = config;
##解决办法：
###安装 vue-loader插件
* npm install vue-loader --save-dev
* vue-loader是webpack下loader的插件 它可以把.vue文件 输出成组件
网友评论