详解vue-cli3多页应用改造

2024-12-07 13:26:43

需求

一个平台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><%= htmlWebpackPlugin.options.title %></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文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
  <title>P-公共服务平台</title>
</head>
<body>
<noscript>
  <strong>
    We're sorry but page doesn't work properly without JavaScript enabled. Please enable it to continue.
  </strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

然后，在根目录下新建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，完美启动～

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue-cli单页应用改成多页应用配置详解

前言从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用组件,还引入jQuery,这简直完美了,这个demo是从我已经改造完成的项目中摘出来的,现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目. 技术栈 vue: 2.0.1 vue-resource:1.0.3 vue
手把手教你vue-cli单页到多页应用的方法

vue-cli到多页应用前言:我有一个cli创建的vue项目,但是我想做成多页应用,怎么办,废话不多说,直接开撸~ 约定:新增代码部分在//add和//end中间删除(注释)代码部分在//del和//end中间,很多东西都写在注释里第一步:cli一个vue项目新建一个vue项目官网 vue init webpack demo cli默认使用webpack的dev-server服务,这个服务是做不了单页的,需要手动建一个私服叫啥你随意一般叫dev.server或者dev.client
vue-cli实现多页面多路由的示例代码

项目下载地址 vue-cli多页面多路由项目示例:vue+webpack+vue-router+vuex+mock+axios Usage This is a project template for vue-cli. github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目. PC端:后台管理页面,单独的页面入口,单独的路由. 移动端:业务展示页面,单独的页面入口,单独的路由. 踩了无数的坑,终于是初见效果了,随后继续优
详解如何将 Vue-cli 改造成支持多页面的 history 模式

标题可能描述不准确, 大概就是这么个需求: 用 Vue-cli 搭建一个多入口, 多页面的站点, 也就是通过html-webpack-plugin插件会生成多个 .html 文件, 在默认下, 是只有 index.html 这个入口可以用 history 模式, 如: http://www.xxx.com/xxx/xxx, 而其他的入口只能用 hash 模式, 如: http://www.xxx.com/admin.html#/xxx/xxx, 因为webpack-dev-middleware会
Vue-cli创建项目从单页面到多页面的方法

对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm install glob --save-dev 2.修改build下的文件 (1)修改webpack.base.conf.js 添加以下代码: var glob = require('glob'): var entries = getEntry('./src/pages/**/*.js') 将module.exports中的 entry:
详解vue-cli多页面工程实践第1/2页

本文介绍了vue-cli多页面工程实践,分享给大家,具体如下: src目录结构因为是自定义的设置,src下的目录结构需要固定,约定大于配置嘛. src目录结构: src/ components/ modules/ # 多页面 index/ # index 单页面 index.html main.js # 入口文件 page1/ index.html main.js group/ page2/ index.html main.js build中的配置 utils.js 增加: // match
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了,一直没机会升级3.0版本开始零零碎碎开始写一些功能,顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口脚本和模板 */ const getPages = (() => { const [ globPathHtml, globPathJs, pages, tempSet ] = [ ['./src/modules/**/in
详解如何使用 vue-cli 开发多页应用

本文介绍了如何使用 vue-cli 开发多页应用,分享给大家,具体如下: 修改的webpack配置文件全局配置修改 webpack.base.conf.js 打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口 entry: { app: './src/main.js', app2: './src/main2.js', app3: './src/main3.js', }, 运行.编译的时候每一个入口都会对应一个Chunk run dev 开发环境修改
vue-cli创建的项目,配置多页面的实现方法

vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂假设要新建的页面是rule,以下以rule为例创建新的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d
基于vue-cli3多页面开发apicloud应用的教程详解第1/2页

之前开发项APP项目直接用APICloud+原生js的方式进行编写,整个项目下来发现开发慢,页面代码多且复杂,维护起来相对困难,而且文件大打包之后的APP会比较大,apicloud的框架也不好用,支持部分es67(像let.const.import等es6新特性不支持写的太难受了) 采用vue-cli+APIcloud的方式写解决以上痛点,开发灵活,并且打包之后体积更小速度更快环境依赖 vue webpack vue-cli3 nodeJS 基本流程项目开发最好准备两个项目,一个打包APP,

详解vue-cli3多页应用改造

相关推荐

随机推荐