H5分享页面（3）——Vue多页配置和jsp页面生成

最新推荐文章于 2024-03-27 11:30:56 发布

大把小米

最新推荐文章于 2024-03-27 11:30:56 发布

阅读量572

点赞数

大把小米

本文链接：https://blog.csdn.net/qq_46012777/article/details/106635847

版权

一般我们分享出来的页面都是独立的页面，而Vue默认是spa单页，所以需要进行多页配置

在vue.config.js里进行配置

1.先封装一个页面构造器


/**
 * 页面构造器
 * @param {String} name 页面名称
 * @param {String} title 页面title
 * @param {String} road 页面build时放置的路径地址
 */
function PageReset(name, title, road) {
  // page 的入口
  this.entry = `src/entry/${name}.js`
  // 模板来源
  this.template = process.env.NODE_ENV === 'production' ? 'public/jsp.html' : 'public/index.html'
  // 在 dist/index.html 的输出
  this.filename = process.env.NODE_ENV === 'production' ? path.join(__dirname, `${road}/${name}.jsp`) : `${name}.html`
  // 当使用 title 选项时，
  // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  this.title = title
  // 在这个页面中包含的块，默认情况下会包含
  // 提取出来的通用 chunk 和 vendor chunk。
  this.chunks = ['chunk-vendors', 'chunk-common', name]
  this.minify = {
    removeComments: true,
    collapseWhitespace: true,
    keepClosingSlash: true,
    removeAttributeQuotes: false,
    caseSensitive: false,
    collapseBooleanAttributes: true
  }
  this.inject = process.env.NODE_ENV !== 'production'
}

2.调用

  // 多页应用
  pages: {
    homework: new PageReset('homework', '作业分享', 'view/share'),
    works: new PageReset('works', '作品分享', 'view/share'),
    video: new PageReset('video', '视频分享', 'view/share'),
  },

jsp页面模板

<!--
 * @Description: 
 * @Author: chenyaru
 * @Date: 2020-05-19 09:14:23
--> 
<%= '\<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%\>\<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%\>' %>
<%= '\<c:set var="ctx" value="\${pageContext.request.contextPath}"/\>' %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta itemprop="name" content="<%= '${title}' %>"/>
    <meta itemprop="image" content="<%= '${logo}' %>" />
    <meta name="description" itemprop="description" content="<%= '${des}' %>" />
    <meta name="keywords" content="<%= '${appName}' %>">
    <!-- <meta name="description" content="<%= '${appName}' %>-<%= '${appDesc}' %>"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <% htmlWebpackPlugin.files.css.forEach(function(css){ %>
        <link rel="stylesheet" type="text/css" href="<%= '${ctx}' %>/static/css/<%= css.substring(css.lastIndexOf('/') + 1) %>">
    <% }) %>
</head>
<body>
    <input type="hidden" id="ctx" value="<%= '${ctx}' %>">
    <input type="hidden" id="appKey" value="<%= '${appKey}' %>">
    <input type="hidden" id="appName" value="<%= '${appName}' %>">
    <input type="hidden" id="basePath" name="" value="<%= '${basePath}' %>">

    <noscript>
        <strong>We're sorry but share doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="<%= '${ctx}' %>/rs/soundChina/data.js"></script>

    <script src="<%= '${ctx}' %>/rs/js/libs/zepto.min.js"></script>
    <script src="<%= '${ctx}' %>/rs/js/appConfig.js"></script>
    <script src="<%= '${ctx}' %>/rs/js/webConfig.js"></script>

    <!-- built files will be auto injected -->
    <% htmlWebpackPlugin.files.js.forEach(function(js){ %>
        <script type="text/javascript" src="<%= '${ctx}' %>/static/js/<%= js.substring(js.lastIndexOf('/') + 1) %>"></script>
    <% }) %>
</body>
</html>

html模板

<!--
 * @Description: 
 * @Author: chenyaru
 * @Date: 2020-05-19 09:14:23
--> 
<!DOCTYPE html>
<html lang="zh-CN">
  <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">
    <meta itemprop="name" content="测试分享title"/>
    <meta itemprop="image" content="https://cdn.linker.cc/CCYT%2F201905%2F17%2F10%2FzifSD5vnvBmP4b0fwsP3OEVIXLfag93yh0PTxT7IP2f2019051710111.png" />
    <meta name="description" itemprop="description" content="测试分享描述" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 通用分享组件目前只能使用这种方式引入 -->
    <script src="resources/js/Tencent-share.js"></script>
  </head>
  <body>
    <img src="/" alt="1" style="display:none;" data-desc="for-share">
    <input type="hidden" id="ctx" value="">
    <input type="hidden" id="appKey" value="3010">
    <input type="hidden" value="喜欢听" id="appName">
    <!-- <input type="hidden" value="http://192.1.2.231:8083/newlhsrv/srv" id="basePath"> -->
    <input type="hidden" value="https://hd-node1.linker.cc/newlhsrv/srv" id="basePath">
    <!-- <input type="hidden" value="https://hd-node1.linker.cc/ccytlhsrv/srv" id="basePath"> -->
    <!-- <input type="hidden" value="https://xlapp.linker.cc/newlhsrv/srv" id="basePath"> -->
    <!-- <input type="hidden" value="http://api.linker.cc/mockjsdata/19" id="basePath"> -->
    <input type="hidden" id="j_appDesc" value="喜欢听，喜欢你">
    <input type="hidden" id="j_linkPath" value="https://scapp.linker.cc">
    <noscript>
      <strong>We're sorry but share 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>

大把小米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5分享页面（3）——Vue多页配置和jsp页面生成

一般我们分享出来的页面都是独立的页面，而Vue默认是spa单页，所以需要进行多页配置在vue.config.js里进行配置1.先封装一个页面构造器/** * 页面构造器 * @param {String} name 页面名称 * @param {String} title 页面title * @param {String} road 页面build时放置的路径地址 */function PageReset(name, title, road) { // page 的入口 this
复制链接

扫一扫