前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue+webpack+mintui+mui构建项目的时候出现的一些问题解决方法

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

作者头像
Dream城堡
发布2018-12-19 14:51:32
6470
发布2018-12-19 14:51:32
举报
文章被收录于专栏:Spring相关Spring相关

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

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

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

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

代码语言:javascript
复制
 { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },

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

代码语言:javascript
复制
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"
        //     }
        // }
    }

}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档