JS经典实例网站首页 JS经典实例

VueJS-跨域_骨架屏插件、预渲染、多页应用-骨架屏应用

发布时间：2020-05-23 17:28:00编辑：雪饮阅读（）

PowerShell下初始化项目

之前一直在cmd中初始化项目，这次可以尝试下在powerShell中初始化一个简易模板的项目

PowerShell中初始化项目你可能会遇到

Windows PowerShell

尝试新的跨平台 PowerShell https://aka.ms/pscore6

PS C:\WINDOWS\system32> vue init webpack-simple 01_my_skeleton

vue : 无法加载文件 C:\Users\xy\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.

microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

所在位置行:1 字符: 1

+ vue init webpack-simple 01_my_skeleton

+ ~~~

+ CategoryInfo : SecurityError: (:) []，PSSecurityException

+ FullyQualifiedErrorId : UnauthorizedAccess

问题解决也很简单

以管理员身份运行powerShell并且先执行如下命令且选项选择为“y”

PS C:\WINDOWS\system32> set-executionpolicy remotesigned

执行策略更改

执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170

中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?

[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暂停(S) [?] 帮助 (默认值为“N”): y

但这样会带来风险，需要谨慎操作。

然后继续我们的项目初始化

PS C:\WINDOWS\system32> vue init webpack-simple 01_my_skeleton

? Project name 01_my_skeleton

? Project description A Vue.js project

? Author xy <1509272975@qq.com>

? License MIT

? Use sass? No

vue-cli · Generated "01_my_skeleton".

To get started:

cd 01_my_skeleton

npm install

npm run dev

合并命令打开项目

然后同样的cd到项目目录，这里执行下合并命令即可一行命令就搞定项目的编译及自动打开浏览器

npm i;npm run dev

解决简易模板下webpack项目build后没有index.html问题

当安装了简易模板的webpack后我们build后发现只有3个文件，关键的是没有我们的index.html

C:\Users\xy\01_my_skeleton>npm run build

> 01_my_skeleton@1.0.0 build C:\Users\xy\01_my_skeleton

> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 3eec0eb484c6cfb1c7b0

Version: webpack 3.12.0

Time: 2869ms

Asset Size Chunks Chunk Names

logo.png?82b9c7a5a3f405032b1db71a25f67021 6.85 kB [emitted]

build.js 106 kB 0 [emitted] main

build.js.map 924 kB 0 [emitted] main

首先在项目中package.json中添加如下依赖

"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}

然后在webpack.config.js中引入该依赖

var path = require('path')
 var webpack = require('webpack')
 const htmlWebpackPlugin=require('html-webpack-plugin')

然后在webpack.config.js中new下这个依赖的实例

      'process.env': {
         NODE_ENV: '"production"'
       }
     }),
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
       compress: {
         warnings: false
       }
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
     }),
     new htmlWebpackPlugin({
       template:'./index.html'
     })
   ])
 }

最后重新npm install

然后重新npm run build就会发现index.html出来了

C:\Users\xy\01_my_skeleton>npm run build

> 01_my_skeleton@1.0.0 build C:\Users\xy\01_my_skeleton

> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 8f37557e9dd8092bf257

Version: webpack 3.12.0

Time: 2979ms

Asset Size Chunks Chunk Names

logo.png?82b9c7a5a3f405032b1db71a25f67021 6.85 kB [emitted]

build.js 106 kB 0 [emitted] main

build.js.map 924 kB 0 [emitted] main

index.html 269 bytes [emitted]

Child html-webpack-plugin for "index.html":

1 asset

Index.html重复加载build问题

打开我们编译生成的index.html会发现build.js有重复加载问题

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>01_my_skeleton</title>
   </head>
   <body>
     <div id="app"></div>
     <script src="/dist/build.js"></script>
   <script type="text/javascript" src="/dist/build.js"></script></body>
 </html>

我们只需要将项目中本来就有的非dist目录下的index.html中去除build.js的引入就行，编译的时候会自动加上的

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>01_my_skeleton</title>
   </head>
   <body>
     <div id="app"></div>
     <script src="/dist/build.js"></script>
   </body>
 </html>

然后重新build即可

解决项目强制请求到dist

当我们把项目build之后放在一个正常的站点根目录后，按我们的理解只需要访问该站点域名就可以访问到该项目，可是它却非要在请求的build.js前面多一个dist屏障。

这个问题解决也很简单，在webpack.config.js中移除如下项然后重新build即可

var path = require('path')
 var webpack = require('webpack')
 const htmlWebpackPlugin=require('html-webpack-plugin')
 
 module.exports = {
   entry: './src/main.js',
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
     filename: 'build.js'
   },

基于webpack插件形式骨架屏搭建

首先看看实现的效果

由于是本地模拟骨架屏(样式很随意，正式使用要自己修改为自己的样式)，并且加载速度很快一闪而过，所以要在slow 3G网络情况下才能看清如

那么具体如何实施？

就像上面解决没有index.html一样，我们得安装插件，这里该插件我们就自己提供了，所以也就没有安装一说。那么首先就是提供下插件，我们在项目根目录新建myPlugin.js如

// 本身是node的环境，使用path+fs操作也是可以的
 function MyPlugin(options) {  //{ text:'xxx' }
     // 个性化定制
     this.options = options;
     if ( !this.options.text ) {
         throw new Error('text is required!!!');
     }
 }
 
 MyPlugin.prototype.apply = function(compiler) {
 
     // 编辑过程事件回调函数
     compiler.plugin('compilation',(compilation)=>{
         console.log(this.options.text);
         // 通过compilation操作文件
         compilation.assets['./test.txt'] = {
             // 内容
             source:()=> {
                 return this.options.text;
             },
             // 大小
             size:()=>{
                 return this.options.text.length;
             }
         }
         // 通过compilation切入其他组件提供的事件
         compilation.plugin('html-webpack-plugin-before-html-processing',(htmlData,callback) => {
             // console.log(htmlData.html);
             htmlData.html = htmlData.html.replace('<div id="app"></div>',`<div id="app">
                   <div style="background-color:red;height:300px;display:none;" id="default" >
                       我是默认的骨架屏
                   </div>
                   <div style="background-color:red;height:300px;display:none;" id="user" >
                       我是user的骨架屏
                   </div>
                   <div style="background-color:red;height:300px;display:none;" id="login" >
                       我是login的骨架屏
                   </div>
                 </div>
                 <script>
                       var hash = window.location.hash;
                       var path = window.location.pathname;
                       if (path === '/login' || hash === '#/login') {
                         document.getElementById('login').style.display = 'block';
 
                       } else if (path === '/user' || hash === '#/user') {
                        document.getElementById('user').style.display = 'block';
 
                       } else {
                        document.getElementById('default').style.display = 'block';
 
                       }
                 </script>`);
 
                 // 错误有限
                 // 如果处理有错误，传递到第一个参数，否则错误参数的位置就null
                 callback(null, htmlData);
                 // 没有成功的生成文件是因为没有调用回调函数
 
         });
     });
 }
 
 module.exports = MyPlugin;
 // 向外导出  供  webpack.config.js 中的module.exports.plugins.push(new MyPlugin(options) )

然后在webpack.config.js中引入该插件如

var path = require('path')
 var webpack = require('webpack')
 const htmlWebpackPlugin=require('html-webpack-plugin')
 const MyPlugin=require('./myPlugin.js')

同样在webpack.config.js文件末尾也new下该插件的实例

new htmlWebpackPlugin({
   template:'./index.html'
 }),
 new MyPlugin({text:'1234567'})

然后由于该插件实现原理是history模式，所以服务器端以nginx为例则try_files $uri $uri/ /index.html;别忘了配置。

最后build后放进服务器中站点根目录即可。

关键字词：vue,webpack,骨架屏,插件

上一篇：mixin插件、history-history

下一篇：VueJS-跨域_骨架屏插件、预渲染、多页应用-多页应用

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

VueJS-跨域_骨架屏插件、预渲染、多页应用-骨架屏应用

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例