vuecli3修改html,vue-cli3多页应用改造
需求
一个平台P,包含产品a、b、c、d、e。各产品UI样式风格统一,且会用到公共配置(HOST、是否添加埋点js)、组件(头部导航、表格、搜索框)、方法(请求拦截、生成UUID)。
现状:由于历史遗留原因,各产品为独立SPA、各自维护,配置、组件也都自成一体,只是大概样式上保持了一致,但细节(比如同一面包屑样式,左边距5px、8px都有)都不一致。
这种情况下,改组件、改配置都得一改改多个地方,且有些项目是vue-cli2、有些是vue-cli3,项目间依赖包的版本也不一致,维护起来非常不友好。
目标:整合各产品单页应用为MPA,提取公共文件(主题、配置、组件、方法),减少规范性东西的维护成本。
目录结构对比
整合前
bds-bank-fe
│ README.md
│
│// 静态资源输出目录
│
└───dist
│ └───index.html + static // 平台首页
│ └───label // 产品a
│ │ └───index.html + static
│ └───metrics // 产品b
│ └───service // 产品c
│ └───help // 产品d
│
│// 项目路径
│
└───help-center // 产品d
└───portal-page // 平台首页
└───service-doc // 产品c
└───unify-label // 产品a
└───unify-metrics // 产品b
│ └───build
│ └───config
│ └───src
整合后
│// 静态资源输出目录
│
└───dist
│ └───index.html
│ └───label.html
│ └───metric.html
│ └───service.html
│ └───stocktake.html
│ └───css
│ └───js
│ └───img
├── public
│ └───favicon.ico
│ └───index.html
│
│// 项目路径
│
├── src
│ └── assets
│ └── components
│ ├── pages
│ ├── index
│ ├── label
│ ├── metric
│ ├── service
│ ├── stocktake
实现
vue-cli 3.0官方支持多页,重点在于vue.config.js文件中pages这个配置项,每个页面单独配置entry、template、filename等。pages配置说明
// 官网示例如下
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是
title: 'Index Page',
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时,
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话,就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}
Step1: 创建新项目
选择需要的Babel、Router、Vuex、eslint...
具体步骤参考官网:创建一个项目
Step2: 修改配置文件vue.config.js
在根目录下新建public文件夹,包含favicon.ico和index.html两个文件。
index文件内容如下:
P-公共服务平台
We're sorry but page doesn't work properly without JavaScript enabled. Please enable it to continue.
然后,在根目录下新建vue.config.js
const glob = require('glob')
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
const PAGES_PATH = './src/pages/*/*.js'
module.exports = {
pages: setPages(),
// TODO:以下内容非生成多页应用必须配置
lintOnSave: true,
productionSourceMap: false,
chainWebpack: config => {
/**
* 自动化导入文件
*/
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(
type => addStyleResource(config.module.rule('less').oneOf(type)))
/**
* 添加别名
*/
config.resolve.alias
.set('@index', resolve('src/pages/index'))
.set('@label', resolve('src/pages/label'))
.set('@metrics', resolve('src/pages/metric'))
.set('@service', resolve('src/pages/service'))
.set('@stocktake', resolve('src/pages/stocktake'))
/**
* 菜单icon处理为svg-sprite
*/
config.module
.rule('svg')
.exclude
.add(resolve('src/assets/icons/menus'))
.end()
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/assets/icons/menus')) // 处理目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
}
}
/**
* 组装页面
*/
function setPages () {
let pages = {}
glob.sync(PAGES_PATH).forEach(filepath => {
let fileList = filepath.split('/')
let fileName = fileList[fileList.length - 2]
pages[fileName] = {
entry: filepath,
template: 'public/index.html',
filename: `${fileName}.html`,
// title:
chunks: ['chunk-vendors', 'chunk-common', fileName]
}
})
return pages
}
/**
* 注入公共less
* @param rule
*/
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, 'src/assets/styles/variable.less')
]
})
}
Step3: 拷贝原项目src目录至pages下,大概长这样
Step4: 各产品原项目下package.json依赖包都挪到根目录下package.json,重新安装
PS:由于依赖向上升级,某些老版本依赖包可能会存在升级引发的问题,需要细心走查一遍。这里由于业务不一样,就不详细赘述了
然后npm start,完美启动~
vuecli3修改html,vue-cli3多页应用改造相关推荐
- vuecli3修改html,详解vue-cli3多页应用改造
需求 一个平台P,包含产品a.b.c.d.e.各产品UI样式风格统一,且会用到公共配置(HOST.是否添加埋点js).组件(头部导航.表格.搜索框).方法(请求拦截.生成UUID). 现状:由于历史遗 ...
- Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置 配置优化 一.js文件最小化处理 二.分割代码 三.图片资源压缩 四.开启gzip压缩 先看一下优化配置之前的文件大小 通过vue-cli3脚 ...
- vue-cli3从零开始搭建vue项目
准备环境 1.下载安装Node.js 下载地址:https://nodejs.org/en/download/ 使用Vue-cli3.0创建项目时,Node.js版本必须是8.9 或更高版本(推荐 8 ...
- vue init webpack缺少标识符_vue 如何从单页应用改造成多页应用_vue.js
最近接到这样一个需求,将之前的三个项目合并成一个,并且要做成后台可配置化,前端动态引入组件的模板化框架. 听起来是不是很拗口...我自己当时都蒙了. 简单分析下需求,就是,项目A/B/C的内容是交叉的 ...
- vue/cli3 配置vux
安装各插件 试过 安装"必须安装"的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install ...
- vue-cli3中的vue.config.js配置
vue-cli3中的vue.config.js配置 我的跨域是配置通过chrome浏览器的跨域设置,前端修改跨域问题,以此解决跨域的,故没有配置代理: const path = require('pa ...
- 八、Vue cli3详解学习笔记
一.认识Vue CLI3 1.1 vue-cli 3 与 2 版本有很大区别: vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 ...
- Vue cli3使用jQuery控件
背景介绍 由于历史遗留问题需要使用之前基于jQuery的代码,其中还用到了一个基于jQuery的多选控件,环境是vue cli3 导入并配置jQuery 首先通过npm导入jQuery npm ins ...
- vue 设置每个页面的title
vue 设置每个页面的title 由于vue文件中只有一个Index.html 文件 title 显示需要通过document.title来设置 1.router---index.js文件中添加met ...
最新文章
- 后端开发之libcurl库编译与安装
- 网站速度优化-前端篇
- C++中基本的输入输出
- jQuery调用其他JS文件中的方法
- SpringBootAdmin监控信息讲解
- C#设置配置文件与读取配置文件
- 网络知识 | 《图解HTTP》读书笔记(上)
- Leetcode算法题(C语言)16--有效的字母异位词
- MySQL2种多实例部署方式总结
- 2018-02-03-PY3下经典数据集iris的机器学习算法举例-零基础
- Java的一些基础问题
- java进阶案例下载_登录案例java实现 ---- Java进阶篇
- 如何从0到1进行电商平台订单系统的搭建?
- mosquitto无法连接
- (2/2) sharex录制屏幕没有声音,升级高版本的 sharex
- matlab动画制作详解
- Android程序员二本出身、逆袭网易、一路孤独,flutter插件引用第三方库
- 太阳报世界独家爆料:以权谋私、出轨女助理!英国卫生大臣汉考克与女下属办公室热吻摸臀
- 【Linux】安装和配置METIS
- Windows打印机共享配置设置
热门文章
- MFC中OnCtlColor的用法(改变控件颜色)
- C#使用 System.Net.Mail发送邮件功能
- C# 中的回车换行符 表示
- thetae_1在MATLAB中的意思,无刷直流电机在Matlab中的建模与仿真研究_荣军
- SQL注入——基于联合查询的字符型GET注入(三)
- pb预览状态下的pagecount_我为什么喜欢用Mac【预览】阅读文献?
- python asyncio和celery对比_如何将Celery与asyncio结合? - python
- python return用法_Python 为什么没有 void 关键字?
- Android开发之高仿百度地图底部滑出菜单
- git生成秘钥配置SSH公钥的简单方法