资讯专栏INFORMATION COLUMN

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

felix0913 / 3149人阅读

摘要:前段时间项目组计划快速开发一个新的项目,开发那边提供壳子和部分系统级功能,所有的页面由完成,考虑兼容性安卓及。后面会继续优化,先把目前的基本部署方式记录下来。

前段时间项目组计划快速开发一个新的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
})

需求开发及部署流程

拉取代码

切换到package.json所在根目录,执行npm i && npm run dev

新建页面(见目录结构部分的例)或者修改

提交代码,忽略目录包括src/distsrc/node_modules

内测/外测/灰度/生产,执行npm i && npm run build,生产环境不能直接操作dist目录(npm run build实际会先删除dist目录再生成,直接操作会导致发布时文件404),需先在发布机生成dist后覆盖到生产服务器对应的dist目录

版本回退,回退代码,然后执行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.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://www.ucloud.cn/yun/93577.html

相关文章

  • 前端开发之走进Vue.js

    摘要:作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本,的简称。的包管理工具,用于同一管理我们前端项目中需要用到的包插件工具命令等,便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通...

    zxhaaa 评论0 收藏0
  • 前端最实用书签(持续更新)

    摘要:前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。 前言 一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。 书签源码 书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

    sshe 评论0 收藏0
  • Vue学习笔记之vue-cli项目搭建解析

    摘要:样式通过标签包裹,默认是影响全局的,如需定义作用域只在该组件下起作用,需在标签上加,如要引入外部文件,首先需给项目安装依赖包,打开,进入项目目录,输入回车。 showImg(https://segmentfault.com/img/remote/1460000013235090); (一)安装node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/...

    Caizhenhao 评论0 收藏0
  • 前端相关大杂烩

    摘要:希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎,由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时,老司机们首先就会告诉你其实是个没有网络请求功能的库。 前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 评论0 收藏0
  • 一张图教你快速玩转vue-cli3

    摘要:前言本文系统的梳理了搭建项目的常见用法,目的在于让你快速掌握独立搭建项目的能力。思维导图接下来,我们根据思维导图,一步步来解释和实现我们的目标。这确保了最终包里数量的最小化。但是如果其中一个依赖需要特殊的,默认情况下无法将其检测出来。 前言 本文系统的梳理了vue-cli3搭建项目的常见用法,目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点: 如何安装项目插件 添加...

    chaosx110 评论0 收藏0

发表评论

0条评论

felix0913

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<