可能是最简洁的 Vue 生产环境模板
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
pages refactor scaffold Mar 18, 2017
src
.babelrc fix babel config Mar 18, 2017
.gitignore init basic demos Oct 10, 2016
README.md
package.json 0.2.1 Aug 5, 2017

README.md

vue-springbud

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.jssrc/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'] // ...
}

导入 CSS

模板已配置根路径为 srcnode_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/' }
  }
}

原生 JS 项目

若不需使用 Vue 时,可将本模板用于测试性开发原生 JS 项目。此时若更改 templates/index.html 入口模板后,需重启打包命令才会重新生成新的 pages/index.html 入口页。

关于 Webpack 的更多常用配置,可参见 Webpack Configuration

Changelog

  • 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 并重写配置文件及目录结构