vue.js - webpack打包vue后运行出现Error in mounted hook: (found in <Root>)

问题描述

问 题

这两天学习使用webpack，尝试把vue，vue-resoucese，mdui，还有自己写的main.js和style.css打包成bundle.js，打包成功没有报错，但是vue会在console报错不能用，很疑惑，来请教一下大家

入口main.js

但是html引入bundle.js后vue是报错的，console页面如下

这里是webpack的配置文件

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader']
            },
            {
                test: /\.(svg|ttf|eot|woff|woff2)$/,
                loader: 'file-loader',
                query: {
                    name :'fonts/[name].[ext]',
                    publicPath: 'dist/'
                }
            }
        ]
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    }
}

---

另外还有一个对输出路径设置的疑惑，在output中指定了输出文件夹是dist/，但是字体的loader用name=fonts/[name].[ext]来指定输出文件夹是在dist/fonts/，但是页面载入字体时，正确得路径是~/test/dist/font/xxxx.tff，但实际引用路径却是~/test/font/xxxx.tff，是我哪里设置得不对吗？

解决方案

可以给loader单独配置publicPath修正路径

例如：

loader: 'file-loader', query: { name: 'css/[name].[ext]', publicPath: '写上你需要的路径前置并以"/"斜杠结尾' } 

这个loader中单独配置的publicPath是不会影响output中的publicPath的

这篇关于vue.js - webpack打包vue后运行出现Error in mounted hook: (found in <Root>)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！