vue+webpack+mintui+mui构建项目的时候出现的一些问题解决方法

最新推荐文章于 2020-11-11 14:29:04 发布

虞姬匠

最新推荐文章于 2020-11-11 14:29:04 发布

阅读量376

点赞数

本文解决Vue项目中M-UI资源文件缺失问题，通过拷贝至node_modules并调整webpack配置；介绍如何使用url-loader解析包含ttf的组件；提供修改webpack的ip和端口配置，实现热启动的详细步骤。

摘要由CSDN通过智能技术生成

vue+webpack+mintui+mui构建项目的时候出现的一些问题解决方法

1.引入M-UI找不到相关资源文件

我们可以把git上面下载的mui的js和css以及一些用到的文件拷贝到node_modules中再引入
git地址:https://github.com/dcloudio/mui

2.包含ttf的组件需要对ttf进行解析,需使用url-loader解析

 { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },

3.webpack的ip和端口修改,需要热启动的插件,如下:

 var path = require('path');

var webpack = require('webpack');

var htmlWebpackPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

// const cssLoader = require("style-loader!css-loader!./style.css");
module.exports = {
    entry: path.resolve(__dirname, './src/main.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: {
        host: '10.167.199.44',
        inline: true,
        open: true,
        port: 3000,
        contentBase: 'src',
        hot: true,
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),//模板路径
            filename: 'index.html'        //自动生成的HTML文件的名称
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 配置图片路径loader
            {test:/\.vue$/,use:"vue-loader"},
            {

                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/,
                query:{
                    "presets":['es2015'],
                    plugins:['transform-runtime']
                }
            },

            // { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: "file" },
            { test: /\.(woff|woff2)$/, use:"url?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
            // { test: /\.scss$/, use: 'scss-loader' },
            // { test: /\.js$/, use: 'url-loader' },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: "url?limit=10000&mimetype=image/svg+xml" }
        ],

        // resolve: {
        //     alias:{//设置vue被导入时候的包的路径
        //         // "vue$":"vue/dist/vue.js"
        //     }
        // }
    }

}