webpack配置和使用vue报错以及解决方案

 

 

问题一：

 

npm install --save-dev vue-loader vue-template-compiler

该命令安装的vue-loader 版本过高 导致 npm run build 打包时报错

 

解决方案

 

• 1. 在webpack.config.js中增加配置

 

const path = require("path")
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    entry: "./src/cll.js",
    output: {
        path: path.resolve(__dirname, 'dist'), // 使用node语法动态获取路径
        filename: "module.js",
        // 打包后加载文件的路径
        publicPath: "dist/"
    },
    module: {
        rules: [{
                test: /\.css$/,
                // css-loader只负责将Css文件进行加载
                // style-loader负责将Css添加到dom中
                // 使用多个loader时 是从右到左
                use: ['style-loader', 'css-loader', ]
            },
            {
                test: /\.less$/,
                use: [{
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "less-loader"
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 对图片的大小限制， 小于10kb的图片 将会转换成base64格式
                        // 大于10KB则需要使用 file-loader 对图片进行处理
                        limit: 10240,
                        // 对打包后图片名称的命名规范
                        name: "img/[name][hash:10].[ext]",
                    }
                }]
            },
            {
                test: /\.js$/,
                // include 包含
                // exclude 排除
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }


        ],
    },
    
    resolve: {
        // alias 别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 用 webpack 时需用 'vue/dist/vue.common.js'
        }
    },
    plugins: [
        new VueLoaderPlugin()
    ],
};

• 2.  修改package.json配置文件中vue-loader的版本 ， 改为 ^13.0.0，然后运行 npm install重新安装