Vue 生产环境模板,默认支持特性包括:
- 热重载
- 公共依赖提取
- 多入口 HTML 注入
- 反向代理
- 内联图片
- Stylus 支持
- CSS 提取
安装依赖:
npm install
运行开发模式,将监听文件变更并写入打包文件到磁盘:
npm run dev-local
运行带 dev-server 的开发模式,默认启动本地于 localhost:9000
并监听文件变更。该模式下打包文件写入内存:
npm run dev
运行生产模式,将压缩文件、分离 CSS 并添加 hash 值:
npm run build
可修改 build/config.js
配置文件以定制相关参数。
页面入口 JS 文件位于 src
路径下,相应 HTML 模板与其同名,位于 src/templates
路径下。src
目录结构如下:
├── index.js # Webpack 入口 JS
├── App.vue # Vue 入口组件
├── assets # 图片 / 字体等静态资源
│ └── logo.png
├── components # 页面 .vue 组件与各页面 JS
│ └── Hello.vue
├── styl # 公用样式
│ ├── mixins.styl
│ └── variables.styl
└── templates # 用于注入页面 JS 的 HTML 模板
└── index.html
模板默认将 JS 文件输出至 dist
路径下,生成的 HTML 文件输出至 pages
目录下。run prod
时,将提取 CSS 文件至 dist/css
路径下。小于 15K 的图片将内联至 JS,不需拼接雪碧图。
默认输出 JS 包为 index / vendor / manifest 三个。其中 manifest 包用于存放对接 index 和 vendor 的 Webpack 相关模块加载代码,使得等业务模块变更时,只变动内容较小的 manifest 而无需更新第三方库 vendor
文件。
处理常见开发需求的配置方式如下:
需对接不同后端框架时,可将输出的 JS 和 HTML 路径更改为后端框架的相应路径。若后端静态资源目录为 resources
,HTML View 目录为 applications/view
,线上路径为 http://demo.com/foo/bar/resources/bundle.js
,相应配置可修改为:
var bundlePath = path.join(process.cwd(), './resources')
var htmlPath = path.join(process.cwd(), './applications/view')
// ...
output: {
publicPath: '/foo/bar/resources/'
}
目前已有 index 页面,需新建 foo 页面时,先修改配置文件的 entry
部分如下:
var entry = {
index: './src/index.js',
foo: './src/foo.js',
vendor: ['vue']
}
而后新建 src/foo.js
与 src/templates/foo.html
并重启 webpack 即可。
默认将 Vue 作为唯一的第三方依赖打包至 vendor.bundle.js
。若页面有多个第三方库,可在 entry
中指定需要抽取至 vendor
中合并的第三方库名:
var entry = {
index: './src/index.js',
foo: './src/foo.js',
vendor: ['vue', 'chart.js', 'vue-router'] // ...
}
模板已配置根路径为 src
与 node_modules
,可通过绝对路径引入相应位置下的 CSS 文件:
/* 导入 src/styl/foo.css */
@import '~styl/foo.css';
/* 导入 npm install 的第三方 CSS 库 */
@import '~normalize.css';
可通过 devServer 反向代理后端接口 API,从而无需在本地搭建后端环境或上传文件到测试环境。修改 module.exports.devServer
下的 proxy
参数即可:
{
// ...
proxy: {
'/api': { target: 'http://backend-address/' }
}
}
若不需使用 Vue 时,可将本模板用于测试性开发原生 JS 项目。此时若更改 templates/index.html
入口模板后,需重启打包命令才会重新生成新的 pages/index.html
入口页。
关于 Webpack 的更多常用配置,可参见 Webpack Configuration
0.2.1
- 配置文件升级 ES6
- 允许 dev server 由外部设备访问
0.2.0
- 添加原生 CSS 导入支持
- 优化默认 stylus 风格
- 移除 Yarn
- 优化默认打包命令
- 文档添加原生 JS 支持备注
0.1.2
修复 stylus 抽取 CSS 问题0.1.1
修复 vue runtime 包问题0.1.0
升级到 Webpack 2 并重写配置文件及目录结构