Vue+WebPack+HBuilder 项目记录

2017-05-27更新 、、项目地址：http://www.5rgame.com

Vue+WebPack+HBuilder 项目记录

以前使用过vue+gulp+hbuilder做过app，vue是直接使用script标签引入的。

此次有新项目使用想要手机版与APP一套完成，所以选择使用vue做单页应用，然后使用hbuilder打包但是放入APP的不止是网址，还是将资源打包进去。

---

开始记录

一为操作步骤二为记录遇到的问题

---

一，环境搭建

1.安装nodejs2.安装淘宝镜像cnpm，增加下载速度3. 安装webpack4.使用vue-cli生成项目5.引入mui,hbuilder的mui框架方便使用html5+也可不引入

---

二，记录问题

1安装webpack为2.x版，中文文档地址[http://www.css88.com/doc/webpack2]2.生成vue项目遇到的问题：    npm run build 打包后在本地浏览，发现报错引入不到文件，需要修改config文件夹下index.js中assetsPublicPath选项'/'改为'./'；    不需要在webpack.base.conf.js里面为rules配置css-loader,在utils.js中已经带有css，sass,less的处理（现在没有css压缩要自己配置）；3.引入mui(此方法也适用于jq与其ui框架),在webpack.base.conf.js中引入var webpack = require('webpack')

引入mui.js

也可以增加别的关键字例如$

这样就可以在全局使用mui关键字

4.引入mui.css,在main.js中import '../static/mui/css/mui.css'（注意：在mui.css中存在.mui-spinner:after中背景使用svg图像，其中引号使webpack无法识辨，会使打包报错，需要删掉单引号与转义符）

记录完成，不定时记录项目中遇到的问题。