帅得被人砍
帅得被人砍
  • 发布:2017-07-12 09:31
  • 更新:2018-05-10 14:32
  • 阅读:11488

vue-cli+webpack项目里如何引入Mui

分类:MUI

vue-cli+webpack项目里是如何引入Mui???引入后都是报错的!!!

2017-07-12 09:31 负责人:无 分享
已邀请:

最佳回复

Trust

Trust - 少说废话

目录结构

  • app
    • index.js
    • app.js
    • mui.js
    • jquery.js
  • bulid
  • webpack.config.js

webpack.config.js

var path = require('path');  
// 定义几个路径  
var ROOT_PATH = path.resolve(__dirname); //__dirname是文件所在的目录  
var APP_PATH = path.resolve(ROOT_PATH, 'app');  
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');  
  
module.exports = {  
	entry: APP_PATH, //这里默认会找index.js,如果需要指定的话,再后面继续拼路径即可;  
	output: {  
		path: BUILD_PATH,  
		filename: 'app.js'  
	},  
	resolve: {  
		alias: {  
			mui: path.resolve(ROOT_PATH, 'app/mui.js'),  
			jquery: path.resolve(ROOT_PATH, 'app/jquery.js')  
		}  
	}  
};

在app.js中引入mui或jquery

import mui from 'mui';  
import jquery from 'jquery';

build

$ webpack

结果截图

完整最简工程附上

BoredApe

BoredApe - 有问题就会有答案。

1.使用 webpack/babel 来打包, 请将 mui 文件排除, 避免 babel 二次打包引起的错误
在.babelrc 中可如下配置 (没有 .babelrc 文件可以在根目录下新建一个)

{  
  "ignore": [  
    "./src/assets/js/mui.js"  
  ]  
}

2.引入方法:webpack 中可以如下配置:

// webpack.config  
{  
  // ...  
  module: {  
    loaders: [{  
      test: require.resolve(assetDir+'/js/mui.js'), //mui目录  
      loader: 'exports-loader?window.mui!script-loader'//全局注入mui  
    }]  
  }  
}

这样我们在页面文件中就可以直接引入啦:

import mui from 'asset/js/mui'; // 绝对路径
Trust

Trust - 少说废话

报什么错?全局没有mui对象?

webpack中引入这种第三方库,网上很多方法。可以搜“webpack引入jQuery”,这种关键词。

常规的方法是直接引入

resolve: {  
    alias: mui: path.resolve(__dirname, 'app/mui.js')  
}

其它模块中导入

import mui from 'mui';

也可以调整mui的源码,将mui对象作为一个模块导出。

module.exports = mui;
  • 帅得被人砍 (作者)

    请看下是什么情况!!!谢谢


    2017-07-12 13:56

  • 帅得被人砍 (作者)

    请看下是什么情况


    2017-07-12 13:57

henthens

henthens

我也遇到这个问题了,vue-cli+webpack项目里如何引入Mui,我每次只要一引入就会报错

  • Trust

    怎么引入的,报什么错误?


    2017-07-12 11:58

  • 帅得被人砍 (作者)

    [HMR] bundle has 1 errors

    client.js?d90c:161 ./~/_css-loader@0.28.4@css-loader?{"minimize":false,"sourceMap":false}!./src/common/css/mui.min.css

    Module not found: Error: Can't resolve '../fonts/mui.ttf' in 'E:\WORKDOC\workspace\kyee\src\common\css'

    @ ./~/_css-loader@0.28.4@css-loader?{"minimize":false,"sourceMap":false}!./src/common/css/mui.min.css 6:69688-69715

    @ ./src/common/css/mui.min.css

    @ ./src/main.js

    @ multi ./build/dev-client ./src/main.js


    2017-07-12 13:36

henthens

henthens

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

我的是报这个错,我是直接把mui.js放在SRC目录下面的js文件夹里面的,然后我在需要用到的组件中用的import mui from '../../common/js/mui.min.js'这样的方式引入,然后就报上面的错,我用npm安装了一个
exports-loader还是报这个错,我要怎样才能正确用mui啊

帅得被人砍

帅得被人砍 (作者)

跟jquery一样在引入方式:
【build/webpack.base.conf.js】里配置
alias: {
"jquery": path.resolve(__dirname, '../static/js/jquery-1.11.1.min.js'),
"mui" : path.resolve(__dirname, '../static/js/mui.min.js')
}

jquery引用:import $ from 'jquery'
mui引用:import mui from 'mui'

直接报错(jquery引入正常):
[HMR] bundle has 1 errors
client.js?d90c:161 ./src/main.js
Module not found: Error: Can't resolve 'mui' in 'E:\WORKDOC\workspace\kyee\src'
@ ./src/main.js 10:0-22
@ multi ./build/dev-client ./src/main.js

  • c***@163.com

    我直接在mui。js里面加了一句,window.mui=mui


    2017-07-12 15:46

wen如故i

wen如故i

用vue做的app吗? 还没试过 ,是使用 h5+ 就一个webview html当主页,然后所有的都是用vue 组件?在这个页面里使用router,路由返回,ajax会重新请求,怎么处理。刚用没多久

c***@163.com

c***@163.com

mui.min.js?2c9c:7 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them  
    at Function.d.extend (mui.min.js?2c9c:7)  
    at eval (mui.min.js?2c9c:7)  
    at eval (mui.min.js?2c9c:7)  
    at Object.<anonymous> (index.js?cf7f4c7…:1147)  
    at __webpack_require__ (index.js?cf7f4c7…:660)  
    at fn (index.js?cf7f4c7…:86)  
    at eval (20:6)  
    at Object.<anonymous> (index.js?cf7f4c7…:840)  
    at __webpack_require__ (index.js?cf7f4c7…:660)  
    at fn (index.js?cf7f4c7…:86)
ydl

ydl

有弄好的模板吗

该问题目前已经被锁定, 无法添加新回复