vue webpack 自动打开页面_Webpack ＋ Vue 多页面前端渲染工程化

1. 项目初始化安装脚手架 npm install easywebpack-cli -g 命令行，然后就可以使用 easywebpack 或 easy 命令

命令行运行 easywebpack init or easy init

选择 create client render project boilerplate for Vue/React/Weex 初始化骨架项目

选择 create vue client render boilerplate

安装依赖 npm install

1.2 通过骨架项目初始化

git clone https://github.com/hubcarl/easywebpack-cli-template.git

cd easywebpack-cli-template/boilerplate/vue 下面

npm install

初始化的项目提供多页面和SPA(vuex+axios)服务端渲染实例，可以直接运行。

1.3 运行和编译运行

npm start

执行 npm start 进行 Webpack 编译， 编译完成自动打开浏览器和编译结果导航，可以点击访问。

编译

npm run build

编译文件默认放到项目根目录的 public 目录

2. 项目结构说明

page下面有三个页面入口，最终将构建 3 个 html 文件， 开发时，只需要在 page 目录下添加 .vue文件即可。page下面的所有 .vue 文件将作为 webpack entry 文件，然后构建出 html 文件。

2.1 特性支持支持单页面和多页面 entry 配置

支持根据目录遍历， 项目page根目录为 page

支持根据 .vue 构建入口文件

支持热更新，支持 css extract， 支持 css和sass (默认支持)，支持构建预览

支持 cdn 配置，支持构建完成回调用于编写自定义逻辑

支持公共文件抽取，抽取文件默认为 vendor.js

支持 es6 编写

支持 js/css/image 压缩和 hash

支持 eslint，babel， postcss

支持 dev (不压缩，无hash，支持热更新)和 prod (压缩 hash，css exteract) 配置

支持eslint，babel， postcss 和 autoprefixer 是默认开启

2.2 配置说明

项目根目录下的 ${project}/webpack.config.js 文件为 easywebpack-cli 构建配置入口，自动根据 framework:'vue' 配置匹配到 easywebpack-vue 构建解决方案构建。

const BUILD_ENV = process.env.BUILD_ENV;

const cdn = BUILD_ENV === 'prod' ? { url: 'http://your.cdn.com'} : '',

module.exports = {

type: 'client', // 指定只构建前端渲染 framework: 'vue', // 指定用 easywebpack-vue 构建 entry: {

// 指定了 framework字段和loader配置，将自动遍历 page 目录下的所有.vue 文件构建 entry 入口 // 支持数组或者key:value entry形式 // loader=false 表示不使用 下面loader模板，因为这里的app/app.js是一个单页面Example，实现方式与普通的多页面入口不一样 include: ['page', { 'app/app': 'page/app/app.js?loader=false' }],

exclude: ['page/test'], // 排除某些文件，支持正则表达式 template: 'view/layout.html', // 这里为构建 html 文件模板 loader: { // .vue 文件 entry 构建 loader 模板 client: 'framework/vue/entry/client-loader.js'

}

}

alias: {

asset: 'asset',

component: 'component',

framework: 'framework',

store: 'store'

},

cdn,

create(){

// call api method }

done(){ // 编译完成 // 这里可以做你想做的事情哟，比如打包上传 CDN if(cdn && cdn.url){

}

}

}

只需要配上面这么多， 就可以 Running 了，因为 easywebpack-vue 把 babel，postcss，sass都默认支持了，当然你可以扩展。命令行启动运行

npm start 或 easy server 或 easy server dev

easy server prod命令行编译，默认开发模式

easy build 或 easy build dev

easy build prod获取 Webpack 配置结果

const EasyWebpack = require('easywebpack-vue');

const webpackConfigList = EasyWebpack.getWebpackConfig()

3. 功能开发

只需要在 page 目录下添加 .vue 文件即可。page下面的所有 .vue 文件将作为 webpack entry 文件，然后构建出 html 文件. 你可以通过 webpack.config.js 的 include 遍历目录以及exclude排除entry文件入口。

4. 相关文档