vue-cli + es6 多页面项目开发及部署

news/2025/2/11 23:28:11

前段时间项目组计划快速开发一个新的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.jswebpack.dev.conf.jswebpack.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.htmlnew HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, {title: "首页",filename: path.resolve(__dirname, '../dist/index.html'),chunks: ['vendor', 'index']})),// 登录注册页:center/login.htmlnew HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, {title: "登录",filename: path.resolve(__dirname, '../dist/center/login.html'),chunks: ['vendor', 'login']}))]
}

https://dhexx.cn/news/show-686418.html

相关文章

java datediff_Java中Date时间差

我这怎么可能是复制的啊。。我只不过和你说,你给的条件完全不充足。因为你的意思是满12个月就是一年,那么什么是满一个月呢?是用天去刻画呢,还是用日期去刻画呢?举个最简单的例子,1月30号到2月28号&#xf…

CSS 锚点 :target属性 制作选项卡

.pic img:first-of-type{display: block;}.pic img:target{display: block;} 转载于:https://www.cnblogs.com/Dyla/p/9929163.html

需求评审

测试人员参加“需求评审”活动所需要达到的目标包括如下三个方面: 1、充分地理解需求,确保对需求的理解与需求分析人员是一致的; 2、从可测试的角度,努力发现《软件需求规格说明书》中不可测试的需求,从而提醒需求分析…

glassfish mysql datasource_NetBeans8.2 GlassFish4.1.1 建立MySQL8.2连接池

NetBeans8.2 GlassFish4.1.1 建立MySQL8.2连接池最简单的办法:使用MySQL5与GlassFish4.0或更早版本jdbc:mysql://localhost:3306/mysql?serverTimezoneUTCNetBeans8.2连接MySQL8.2会出现时区的问题,可以在MySQL的配置文件更改默认时区也可以在MySQL命令…

inotify的搭建

inotify的搭建 在安装inotify之前我们要先安装云yum源 然后安装inotify的工具 命令 yum -y install inotify-tools 安装了以后会有两个命令; inotifywait:在被监控的文件或目录上等待特定文件系统事件(open,close,dele…

JDK1.9环境变量配置

JAVA_HOME C:\Program Files\Java\jdk-9.0.1 JRE_HOME C:\Program Files\Java\jre-9.0.1 PATH .;%JAVA_HOME%\bin;%JRE_HOME%\bin CLASSPATH .;%JAVA_HOME%\lib;%JRE_HOME%\lib

java mail张_JavaMail入门第五篇 解析邮件

上一篇1、调用Message对象的getFrom、getSubject等方法,可以得到邮件的发件人和主题等信息,调用getContentType方法得到邮件的类型;2、通过Message.getContentType方法的返回值判断邮件类型,并调用Message.getContent方法得到邮件…

DataTable数据存储问题

需求: 我想要实现这样一个效果:用户可以在表中通过右键新建行、删除行(这两个后面再写),编辑数据后进行保存。这里保存需要做一个区分,就是新增的和修改的。他们的区别就是新增的主键为空,而修改…

java怎么输入int_Java中int数字 java中怎么输入一个数字

java中int型最大值是多少?int max2147483647 int min-2147483648 代码片段: byte bmax, bmin; short shmax, shmin; char cmax, cmin; int imax, imin; long lmax,lmin; float fmax,fmin; double dmax,dmin; fmax Float.MAX_VALUE; fmin Float.MIN_VAL…

万万没想到,分布式存储系统的一致性是......

2019独角兽企业重金招聘Python工程师标准>>> 2018-03-21 竹翁 阿里技术 阿里妹导读:分布式存储系统是一个非常古老的话题,也是分布式系统里最难、最复杂、涉及面最广的问题之一。本文深入浅出,为大家详细解释相关的重要概念。对于…