商业源码服务器教程 2023-12-21 15:19:02

怎么配置json文件控制ssr开启的端口的带

其中各protocol与obfs介绍参见：混淆插件说明

注：客户端的protocol和obfs配置必须与服务端的一致，除非服务端配置为兼容插件。

redirect参数说明：

值为空字符串或一个列表，若为列表示例如

“redirect”:[“bingcom”, “cloudflarecom:443”],

作用是在连接方的数据不正确的时候，把数据重定向到列表中的其中一个地址和端口（不写端口则视为80），以伪装为目标服务器。

dns_ipv6参数说明：

为true则指定服务器优先使用IPv6地址。仅当服务器能访问IPv6地址时可以用，否则会导致有IPv6地址的网站无法打开。

一般情况下，只需要修改以下五项即可：

"server_port":8388, //端口

"password":"password", //密码

"protocol":"origin", //协议插件

"obfs":"http_simple", //混淆插件

"method":"aes-256-cfb", //加密方式

这次给大家带来怎样使用Vue页面骨架屏注入，使用Vue页面骨架屏注入的注意事项有哪些，下面就是实战案例，一起来看一下。

作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行，首屏加载的问题也在困扰着开发者们。那么有没有一个办法，也能让SPA用上骨架屏呢？这就是这篇文章将要探讨的问题。

文章相关代码已经同步到 Github ，欢迎查阅~

一、何为骨架屏

简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。

这个技术在一些以内容为主的APP和网页应用较多，接下来我们以一个简单的Vue工程为例，一起探索如何在基于Vue的SPA项目中实现骨架屏。

二、分析Vue页面的内容加载过程

为了简单起见，我们使用 vue-cli 搭配 webpack-simple 这个模板来新建项目：

vue init webpack-simple vue-skeleton

这时我们便获得了一个最基本的Vue项目：

├── packagejson

├── src

│ ├── Appvue

│ ├── assets

│ └── mainjs

├── indexhtml

└── webpackconfjs安装完了依赖以后，便可以通过 npm run dev 去运行这个项目了。但是，在运行项目之前，我们先看看入口的html文件里面都写了些什么。

<!DOCTYPE html>

<head>

<title>vue-skeleton</title>

</head>

<body>

</body>

</html>可以看到，DOM里

面有且仅有一个 p#app ，当js被执行完成之后，此 p#app 会被整个替换掉，因此，我们可以来做一下实验，在此p里面添加一些内容：

<p>Hello skeleton</p>

</p>打开chrome的开发者工具，在 Network 里面找到 throttle 功能，调节网速为“Slow 3G”，刷新页面，就能看到页面先是展示了三句“Hello skeleton”，待js加载完了才会替换为原本要展示的内容。

现在，我们对于如何在Vue页面实现骨架屏，已经有了一个很清晰的思路——在 p#app 内直接插入骨架屏相关内容即可。

三、易维护的方案

显然，手动在 p#app 里面写入骨架屏内容是不科学的，我们需要一个扩展性强且自动化的易维护方案。既然是在Vue项目里，我们当然希望所谓的骨架屏也是一个 vue 文件，它能够在构建时由工具自动注入到 p#app 里面。

首先，我们在 /src 目录下新建一个 Skeletonvue 文件，其内容如下：

</ul>

</p>

</template>

<style>

skeleton {

position: relative;

height: 100%;

overflow: hidden;

padding: 15px;

box-sizing: border-box;

background: #fff;

}

skeleton-nav {

height: 45px;

background: #eee;

margin-bottom: 15px;

}

skeleton-swiper {

height: 160px;

background: #eee;

margin-bottom: 15px;

}

skeleton-tabs {

list-style: none;

padding: 0;

margin: 0 -15px;

display: flex;

flex-wrap: wrap;

}

skeleton-tabs-item {

width: 25%;

height: 55px;

box-sizing: border-box;

text-align: center;

margin-bottom: 15px;

}

skeleton-tabs-item span {

display: inline-block;

width: 55px;

height: 55px;

border-radius: 55px;

background: #eee;

}

skeleton-banner {

height: 60px;

background: #eee;

margin-bottom: 15px;

}

skeleton-productions {

height: 20px;

margin-bottom: 15px;

background: #eee;

}

</style>接下来，再新建一个 skeletonentryjs 入口文件：

import Vue from 'vue'

import Skeleton from '/Skeletonvue'

export default new Vue({

components: {

Skeleton

template: '<skeleton />'

})在完成了骨架屏的准备之后，就轮到一个关键插件 vue-server-renderer 登场了。该插件本用于服务端渲染，但是在这个例子里，我们主要利用它能够把 vue 文件处理成 html 和 css 字符串的功能，来完成骨架屏的注入，流程如下：

四、方案实现

根据流程图，我们还需要在根目录新建一个 webpackskeletonconfjs 文件，以专门用来进行骨架屏的构建。

const path = require('path')

const webpack = require('webpack')

const nodeExternals = require('webpack-node-externals')

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

moduleexports = {

target: 'node',

entry: {

skeleton: '/src/skeletonjs'

output: {

path: pathresolve(dirname, '/dist'),

publicPath: '/dist/',

filename: '[name]js',

libraryTarget: 'commonjs2'

module: {

rules: [

{

test: /\css$/,

use: [

'vue-style-loader',

'css-loader'

]

{

test: /\vue$/,

loader: 'vue-loader'

}

]

externals: nodeExternals({

whitelist: /\css$/

}),

resolve: {

alias: {

'vue$': 'vue/dist/vueesmjs'

extensions: ['', 'js', 'vue', 'json']

plugins: [

new VueSSRServerPlugin({

filename: 'skeletonjson'

})

]

}可以看到，该配置文件和普通的配置文件基本完全一致，主要的区别在于其 target: 'node' ，配置了 externals ，以及在 plugins 里面加入了 VueSSRServerPlugin 。在 VueSSRServerPlugin 中，指定了其输出的json文件名。我们可以通过运行下列指令，在 /dist 目录下生成一个 skeletonjson 文件：

webpack --config /webpackskeletonconfjs

这个文件在记载了骨架屏的内容和样式，会提供给 vue-server-renderer 使用。

接下来，在根目录下新建一个 skeletonjs ，该文件即将被用于往 indexhtml 内插入骨架屏。

const fs = require('fs')

const { resolve } = require('path')

const createBundleRenderer = require('vue-server-renderer')createBundleRenderer

// 读取`skeletonjson`，以`indexhtml`为模板写入内容

const renderer = createBundleRenderer(resolve(dirname, '/dist/skeletonjson'), {

template: fsreadFileSync(resolve(dirname, '/indexhtml'), 'utf-8')

})

// 把上一步模板完成的内容写入（替换）`indexhtml`

rendererrenderToString({}, (err, html) => {

fswriteFileSync('indexhtml', html, 'utf-8')

})注意，作为模板的 html 文件，需要在被写入内容的位置添加  占位符，本例子在 p#app 里写入：

</p>接下来，只要运行 node skeletonjs ，就可以完成骨架屏的注入了。运行效果如下：

<head>

<title>vue-skeleton</title>

skeleton {

position: relative;

height: 100%;

overflow: hidden;

padding: 15px;

box-sizing: border-box;

background: #fff;

}

skeleton-nav {

height: 45px;

background: #eee;

margin-bottom: 15px;

}

skeleton-swiper {

height: 160px;

background: #eee;

margin-bottom: 15px;

}

skeleton-tabs {

list-style: none;

padding: 0;

margin: 0 -15px;

display: flex;

flex-wrap: wrap;

}

skeleton-tabs-item {

width: 25%;

height: 55px;

box-sizing: border-box;

text-align: center;

margin-bottom: 15px;

}

skeleton-tabs-item span {

display: inline-block;

width: 55px;

height: 55px;

border-radius: 55px;

background: #eee;

}

skeleton-banner {

height: 60px;

background: #eee;

margin-bottom: 15px;

}

skeleton-productions {

height: 20px;

margin-bottom: 15px;

background: #eee;

}

</style></head>

<body>

</p>

</body>

</html>可以看到，骨架屏的样式通过 <style></style> 标签直接被插入，而骨架屏的内容也被放置在 p#app 之间。当然，我们还可以进一步处理，把这些内容都压缩一下。改写 skeletonjs ，在里面添加 html-minifier ：

+ const htmlMinifier = require('html-minifier')

rendererrenderToString({}, (err, html) => {

+ html = htmlMinifierminify(html, {

+ collapseWhitespace: true,

+ minifyCSS: true

+ })

fswriteFileSync('indexhtml', html, 'utf-8')

})来看看效果：

效果非常不错！至此，Vue页面接入骨架屏已经完全实现了。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

如何使用js封装ajax功能函数与用法

JS里常见内置函数使用详解

本文主要介绍 UmiJS 的预渲染功能。

服务端渲染（Server-Side Rendering），是指由 服务端 完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。

服务端渲染，首先得有后端服务器（一般是 Nodejs）才可以使用，而没有后端服务器的情况下，可以使用 预渲染 。

预渲染与服务端渲染唯一的不同点在于 渲染时机 ，服务端渲染的时机是在用户访问时执行渲染（即实时渲染，数据一般是最新的），预渲染的时机是在项目构建时，当用户访问时，数据不一定是最新的（ 如果数据没有实时性，可以直接考虑预渲染 ）。

预渲染在构建时执行渲染，将渲染后的 HTML 片段生成静态 HTML 文件。无需使用 web 服务器实时动态编译 HTML，适用于 静态站点生成 。

Umi3 在 SSR 上做了大量优化及开发体验的提升，具有以下特性：

默认情况下，服务端渲染时关闭的，可通过配置开启：

服务端渲染的数据获取方式与 SPA(单页应用) 有所不同，为了让客户端和服务端都能获取到同一份数据，Umi 提供了页面级数据的预获取。

每个页面可能有单独的数据预获取逻辑，这里我们会获取页面组件上的 getInitialProps 静态方法，执行后将结果注入到该页面组件的 props 中，如：

getInitialProps 有几个固定参数：

为了结合数据流框架，我们提供了 modifyGetInitialPropsCtx 方法，由插件或应用来扩展 ctx 参数，以 dva 为例：

然后在页面中，可以获取到 store ：

同时也可以在自身应用中进行扩展：

同时可以使用 getInitialPropsCtx 将服务端参数扩展到 ctx 中，例如：

在使用的时候，就有 req 对象，不过需要注意的是，只在服务端执行时才有此参数：

则在执行 getInitialProps 方法时，除了以上两个固定参数外，还会获取到 title 和 store 参数。

关于 getInitialProps 执行逻辑和时机，需要注意：

执行 umi build ，除了正常的 umijs 外，会多一个服务端文件： umiserverjs （相当于服务端入口文件）。然后在后端框架中，引用该文件：

render 方法参数和返回值如下：

完美兼容客户端动态加载，配置如下：

@umijs/preset-react 插件集中已内置对标题的渲染，通过以下步骤使用：

@umijs/preset-react 插件集中已内置 dva

这时候 getInitialProps(ctx) 中的 ctx 就会有 store 属性，可执行 dispatch ，并返回初始化数据。

Umi 同时支持对服务端和客户端包大小的分析

基于vue-cli3的项目，改造成SSR。

服务端渲染会提取组件的样式内联到html中，与link标签中的重复，使得页面体积变大，导致响应时间很慢。

原因是ssr会自动进行资源注入 Manual Asset Injection ，包含css、js等。

我们需要的是没有<style>标签的页面

所以通过配置参数，关闭资源注入。

接下来需要把css、js等文件再关联到输出的html中

当创建bundlerender的时候，我们可以使用一个模板，在这个模板里面预置页面所需要的各种资源。

思来想去，csr（客户端渲染）模式下生成的indexhtml再合适不过了。

而且，当build csr时，我们也可以预置一个模板，在这里添加上第三方的资源

最后是在模板中添加锚点

到这里基本大功告成

贴一下vueconfigjs和build script(windows 平台)

骨架服务端页面内容文件

DABAN RP主题是一个优秀的主题，极致后台体验，无插件，集成会员系统
网站模板库 » 怎么配置json文件控制ssr开启的端口的带

商业源码钻石

分享到：

怎么配置json文件控制ssr开启的端口的带

商业源码钻石

0条评论

发表评论取消回复

商业源码 钻石

相关推荐

0条评论

发表评论 取消回复

提供最优质的资源集合

商业源码钻石

发表评论取消回复