现在有很多的打包工具可以选择,grunt,gulp,webpack等等。vue官方建议是使用webpack,而且webpack相对其他打包工具的好处是代码动态编译,可以根据需要提取出公共部分的代码。因此我们也选择webpack作为打包工具。
目录结构
开发目录 src
assets 静态资源,如图片等的保存
css 样式文件,css,less等
fonts 字体文件,根据需要添加自定义字体
js js框架,公共部分代码,自定义组件等
5.view html页面文件,页面入口js文件
build 打包参数配置
主要用于对打包过程的控制
1. webpack.base.conf.js 基础配置参数,开发和生成代码打包共用
2. webpack.dev.conf.js 开发环境下的打包参数配置
3. webpack.prod.conf.js 生产环境的打包参数配置
config 打包模式配置
主要是打包相关的基础参数配置,如文件存放目录,打包后的访问根目录,是否压缩等
assets 生产环境下的js/css/图片等文件保存路径
可在config中指定
view 生产环境下的页面文件Html保存路径
和src/view下的html文件一一对应
package.json 打包的环境依赖配置
使用方式
开发 npm run dev 开启本地web服务,方便调试页面和代码
生产环境打包 npm run build 将src下的代码打包到根目录下的 assets和view目录下
功能
支持vue开发的调试,支持webpack打包的调试和自动更新,不需要手动刷新代码
支持代码和语法检查,可在根目录的.eslintrc下配置检查规则
3.支持webpack的多页面(多入口)开发,相比单入口模式,逻辑更清楚
使用说明
1.view下的页面必须放在view的下级目录,比如view/index/index.html,同时每个页面文件必须搭配一个同名的js文件作为页面入口,比如view/index/index.js
2.可根据需要配置本地调试服务器的端口,默认8000,
在config/index下配置
3.可配置打包路径等,同样在config/index下配置
初始化说明
在根目录下执行 npm install (如果不是root用户的话,sudo npm install)
打包或者调试时,如果npm 命令提示错误,一般是某个模块未安装,可执行 npm install ***(模块名称) 安装相关模块
npm run dev (调试)
npm run build (正式打包)