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

2024年5月31日 189次阅读 来源: 前端老李

前段时间项目组设计疾速开辟一个新的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.js和webpack.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/dist、src/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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞