vue-cli + es6 多页面项目开辟及布置

前段时间项目组设计疾速开辟一个新的App项目,App开辟那里供应壳子和部份体系级功用,一切的页面由h5完成,斟酌兼容性安卓4.1及ios7.1。全新的项目,没有汗青包袱,就尝试了新的开辟形式,采纳了webpack + vue-cli + vue-router + es6 + axios这一套,从webpack设置到文件目次,从开辟流程到上线布置,探索尝试,到现在初版已上线。后面会继承优化,先把现在的基础布置体式格局记录下来。

webpack -- ^3.6.0  |   vue -- ^2.5.2    | vue-router -- ^3.0.1  |    axios -- ^0.17.1

简介

  • 项目采纳前后端星散,后端开辟只担任供应接口及静态服务器
  • 前端采纳多个进口、多个单页(每一个单页能够含vue-router路由到差别的子页面)的体式格局,终究在dist下天生多个.html及对应的.js/.css文件
  • 域名根目次直接指向到npm run build以后天生的dist目次,能够经由过程http://m.example.com/index.html直接访问到index.html

终究天生的dist目次类似于:

  • dist

    • index.html
    • center/

      • index.html
      • regist.html
      • login.html
    • static/

      • js/

        • vendor.[chunkhash].js
        • index.[chunkhash].js
        • regist.[chunkhash].js
        • login.[chunkhash].js
      • css/

        • index.[chunkhash].css
        • regist.[chunkhash].css
        • login.[chunkhash].css

例:http://m.example.com/index.html能够访问到首页,http://m.example.com/center/regist.html则访问到注册页,而http://m.example.com/center/regist.html#agreement访问到用户协定页

目次构造

  • dist: 如上,不追随版本掌握
  • build: webpack构建相干设置
  • config: 开辟相干设置

    • webpack.user.conf.js: 新建的自定义设置文件,理论上对webpack的设置变动都在这里举行,然后对webpack.dev.conf.jswebpack.dev.prod.js举行merge掩盖
  • node_modules: 插件及依靠,不追随版本掌握
  • src: 开辟目次

    • assets: 寄存静态资本,含base.js/base.css/plugins/images
    • components: 一些能够公用的小组件
    • entry: webpack打包的进口文件,有多个HtmlWebpackPlugin的实例,每一个实例都对应一个进口,每一个进口打包出一个页面
    • router: 某些页面能够会用到vue-router完成前端路由,一致在此文件夹下定义,会被entry中的进口js引入运用
    • template: 寄存HtmlWebpackPlugin打包基于的模板页,多个进口能够共用一个模板页。但现实开辟中能够某些进口有私有的逻辑,需零丁建立模板
    • page: 寄存现实页面组件及组装页面
  • package.json: 包信息及依靠

例:假如我们想终究天生http://m.example.com/center/regist.html且含有前端路由的话,须要涉及到的文件有:

1. src/entry/regist.js,以建立进口文件,供`HtmlWebpackPlugin`运用
2. config/webpack.user.conf.js,新建进口,指定进口文件为`src/entry/regist.js`;新建`HtmlWebpackPlugin`实例,指定打包后天生的文件途径、文件名及js
3. src/router/regist.js,由于涉及到前端路由,须要设置路由信息
4. page/center/regist.vue、page/center/agreement.vue,举行页面本身逻辑款式的开辟

webpack设置

默许的webpack设置大致是采纳build/webpack.base.js + build/webpack.dev.js/build/webpack.prod.js merge后的效果,为了轻易完成一致设置,在config下新建了webpack.user.conf.js,再离别和build/webpack.dev.js/build/webpack.prod.js merge,因而页面的设置,基础都在webpack.user.conf.js举行。

  • 设置项

    • context: 设置在package.json地点的根目次
    • entry: 设置为src/entry/
    • ouput: 临盆环境设置为/src/dist/,开辟环境默许打包后放在内存中,不代表现实物理途径,output详细设置:
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'static/js/[name].[chunkhash:16].js',
        chunkFilename: 'static/js/[id].[chunkhash:16].js',
        publicPath: '/pailifan/'
    }
    • plugins: 插件设置

      • HtmlWebpackPlugin: new多个实例,每一个实例对应一个单页
      • CommonsChunkPlugin: 大众模块提取打包,默许指定将[vue.js -v2.5.2, vue-router.js -v3.0.1]打包,同时设置minChunks为Infinity以防备其他公用模块被打包进来
      new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',         /*在entry中指定vendor对应的模块为[vue.js,vue-router.js]*/
          filename: 'static/js/vendor.[chunkhash:16].js',
          minChunks: Infinity
      })

需求开辟及布置流程

  1. 拉取代码
  2. 切换到package.json地点根目次,实行npm i && npm run dev
  3. 新建页面(见目次构造部份的例)或许修正
  4. 提交代码,疏忽目次包含src/distsrc/node_modules
  5. 内测/外测/灰度/临盆,实行npm i && npm run build,临盆环境不能直接操纵dist目次(npm run build现实会先删除dist目次再天生,直接操纵会致使宣布时文件404),需先在宣布机天生dist后掩盖到临盆服务器对应的dist目次
  6. 版本回退,回退代码,然后实行npm i && npm run build,同宣布一致

其他第三方插件和库

  • axios: ajax库,部份坑已另一篇笔记中举行了诠释及提出解决方案
  • vue-touch: 手势库
  • es6-promise: 对Promise举行pollyfill

附:
vue-cli + es6 + axios项目踩坑

附:
webpack.user.conf.js,会在
webpack.base.conf.js
webpack.dev.conf.js
webpack.dev.prod.js举行merge兼并

const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = require('../config')

const defaultHtmlWebpackConfig = {
    template: './src/template/index.html'
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
}

module.exports = {

    context: path.resolve(__dirname, '../'),
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'static/js/[name].[chunkhash:16].js',
        chunkFilename: 'static/js/[id].[chunkhash:16].js',
        publicPath: '/'
    },
    CommonsChunkPlugin: {
        Dev: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                filename: 'vendor.js',
                minChunks: Infinity
            })
        ],
        Prod: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                filename: 'static/js/common/vendor.[chunkhash:16].js',
                minChunks: Infinity
            })
        ]
    },
    entry: {
        vendor: ['vue', 'vue-router', 'es6-promise'],
        index: './src/entry/index/index.js',
        login: './src/entry/center/login.js'
    },
    HtmlWebpackPlugin: [
        // 首页:index.html
        new HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, {
            title: "首页",
            filename: path.resolve(__dirname, '../dist/index.html'),
            chunks: ['vendor', 'index']
        })),
        // 登录注册页:center/login.html
        new HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, {
            title: "登录",
            filename: path.resolve(__dirname, '../dist/center/login.html'),
            chunks: ['vendor', 'login']
        }))
    ]
}
    原文作者:前端老李
    原文地址: https://segmentfault.com/a/1190000013881350
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞