精华内容
下载资源
问答
  • 主要是这两个包,实现静态化打包 require(‘prerender-spa-plugin’); import MetaInfo from ‘vue-meta-info’ 不足点:动态路由传值 ,请求api获取数据,不能打包出静态化,在路由组件创建前调用接口,并且数据...

    主要是这两个包,实现静态化打包
    require(‘prerender-spa-plugin’);
    import MetaInfo from ‘vue-meta-info’
    不足点:路由动态传值 ,请求api获取数据,不能打包出静态化,在路由组件创建前调用接口,并且数据绑定模版上可以打包静态结构代码,适用于宣传页项目开发,动态数据完全受限无法满足需求

    prerender-spa-plugin使用注意⚠️ 在main.js 入口文件 创建Vue 添加

    new Vue({
      router,
      render: h => h(App),
      mounted() {
        document.dispatchEvent(new Event('custom-render-trigger'))
      }
    }).$mount('#app')
    

    vue-meta-info 使用

    //全局注册
    import MetaInfo from 'vue-meta-info'
    Vue.use(MetaInfo)
    
    路由组件使用
    export default {
      metaInfo: {
            title: window.logoName + 'abort',
            meta: [
                {
                    name: 'keywords',
                    content: '关键字2,关键字2,关键字2'
                },
                {
                    name: 'description',
                    content: '这是一段网页的描述2'
                }
            ]
        },
      data() {
        return {},
      },
      created(){},
      //...
    

    webpack配置完整代码

    const path = require('path');
    
    const CompressionPlugin = require('compression-webpack-plugin')
    
    // npm run build后,打开localhost:8888,项目结构
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    
    const PrerenderSPAPlugin = require('prerender-spa-plugin');
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
    
    const debug = process.env.NODE_ENV === "production"
    
    function resolve(dir) {
        return path.join(__dirname, dir)
    }
    
    module.exports = {
        lintOnSave: false,
        runtimeCompiler: true, // 关键点在这
        pluginOptions: {},
        publicPath: "./", // ./改为/
        outputDir: "server/dist",
        // assetsDir: "static",
        indexPath: "index.html",
        productionSourceMap: false,
        filenameHashing: true,
        css: {
            loaderOptions: {
                sass: {
                    prependData: `@import "@a/styles/mixins.scss";`
                },
            }
        },
        chainWebpack: config => {
            config.module
                .rule("fonts")
                .test(/.(ttf|otf|eot|woff|woff2)$/)
                .use("url-loader")
                .loader("url-loader")
                .tap(options => {
                    options = {
                        name: 'static/fonts/[name].[ext]',
                    }
                    return options
                }).end();
            debug && config.plugin('extract-css').tap(args => [{
                filename: `static/css/[name].${parseInt(new Date().getTime() / 1000)}.css`,
                chunkFilename: `static/css/[name].${parseInt(new Date().getTime() / 1000)}.css`
            }])
            debug && config.module
                .rule('images')
                .use('image-webpack-loader')
                .loader('image-webpack-loader')
                .options({ bypassOnDebug: true })
                .end()
            config.resolve.alias
                .set('@', resolve('src'))
                .set('@c', resolve('src/components'))
                .set('@a', resolve('src/assets'))
                .set('@p', resolve('src/plugins'))
                .set('@l', resolve('src/lib'))
                .set('@r', resolve('src/router'))
                .set('@s', resolve('src/store'))
                .set('@v', resolve('src/views'))
                .set('@u', resolve('src/util'))
                .set('@com', resolve('src/common'))
                .set('@config', resolve('src/config'))
        },
        configureWebpack: (config) => {
            return {
                output: {
                    // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
                    filename: `static/js/[name].[hash].js`,
                    chunkFilename: `static/js/[name].[hash].js`
                },
                plugins: !debug ? [] : [
    
    
    
                    new CompressionPlugin({
                        algorithm: 'gzip',//开启gzip
                        test: /\.js$|\.html$|.\css/, // 匹配文件名
                        threshold: 10240, // 对超过10k的数据压缩
                        deleteOriginalAssets: false // 不删除源文件
                    })
    
    
                    //预编译插件
     new PrerenderSPAPlugin({
                        staticDir: path.join(__dirname, "server/dist"),
                        // Required - The path to the webpack-outputted app to prerender.
                        // 【必须】生成文件的路径,也可以与webpakc打包的一致
                        // Optional - The path your rendered app should be output to.
                        // (Defaults to staticDir.)
                        // outputDir: path.join(__dirname, 'server/dist'),
                        // indexPath: path.join(__dirname, 'server/dist', 'index.html'),
                        // publicPath: './',
                        // 【必须】对应自己的路由文件,如路由有参数,则需写成 /a/param1
                        routes: [
                            //TODO  mobile 无效 被自己设置的路由拦截了 手机和pc!和预编译运行环境有关系 当前是电脑环境要访问我的手机vue文件 呵呵 你还是去pc逛逛吧
                            // "/m_about",
                            // "/m_index",
    
                            "/pc_about",
                            "/pc_index",
                        ],
                        // 这是预渲染后的静态页minify模式,移除空格换行之类的缩小文件大小
                        minify: {
                            collapseBooleanAttributes: true,
                            collapseWhitespace: true,
                            decodeEntities: true,
                            keepClosingSlash: true,
                            sortAttributes: true
                        },
                        // postProcess(renderedRoute) {
                        //     // Ignore any redirects.
                        //     renderedRoute.route = renderedRoute.originalRoute
                        //     // Basic whitespace removal. (Don't use this in production.)
                        //     renderedRoute.html = renderedRoute.html.split(/>[\s]+</gmi).join('><')
                        //     // For example: /dist/dir/special.html/index.html -> /dist/dir/special.html
                        //     if (renderedRoute.route.endsWith('.html')) {
                        //         renderedRoute.outputPath = path.join(__dirname, 'server/dist', renderedRoute.route)
                        //     }
                        //     return renderedRoute
                        // },
    
                        // Server configuration options.
                        // server 属性在纯静态的页面中是不起作用的,他的作用仅限于你项目中有数据请求是从接口哪里拿到的
                        // 防止插件运行过程中因为数据拿不到导致报错,渲染失败情况
    
                        // server: {
                         Normally a free port is autodetected, but feel free to set this if needed.
                         proxy 接口代理,与vue的devServer相同
                        //     port: 8001
                        proxy:{
                            '/api': {
                                target:'http://127.0.0.1:9001/v1',
                                changeOrigin:true, //是否跨域
                            },
                        },
    
                        // postProcess 后处理,渲染完毕后做些什么,
                        // 我这里因为项目中使用了懒加载,需要剔除项目生成文件中的因为渲染过程重复插入的script标签,
                        // 不剔除会造成最终文件在打开后控制台报错,webpackJsonp not is function类似错误
    
                        // postProcess (renderedRoute) {
                        //     renderedRoute.html = renderedRoute.html.replace(/1/g,function (target) {
                        //         console.log(chalk.bgRed('\\n\\n剔除的懒加载标签:'), chalk.magenta(target))
                        //         return ''
                        //     });
                        //     return renderedRoute
                        // },
                        // 这是渲染启动的入口,必须
                        // 启动puppeteer开始抓取
                        renderer: new Renderer({
                            // slowMo、devtools、maxConcurrentRoutes、headless这四个配置跟调试关系重大,
                            // 让你发现无头浏览器渲染过程中发生了什么
                            // slowMo延迟渲染每一步,1000为时间1秒
                            // slowMo: 1000,
                            // 渲染前先打开控制台
                            // devtools: true,
                            // 最多每次渲染的路由数量 单位个
                            maxConcurrentRoutes: 1,
                            // 调试过程中要把headless设置为false,表示在有头浏览器中渲染,上面的也依赖于此
                            // 在线上构建过程中,要设置为true,无头模式,服务器是没有屏幕让你看的
                            // headless:true,
                            // 这是浏览器的视口配置,大多情况设置为与电脑屏幕一致
                            // 不然渲染出来的静态文件就会偏小,留有一部分白屏
                            defaultViewport: {
                                width: 1920,
                                height: 950,
                                deviceScaleFactor: 1,
                                isMobile: false,
                                hasTouch: false,
                                isLandscape: false
                            },
                            // Optional - The name of the property to add to the window object with the contents of `inject`.
                            injectProperty: '__PRERENDER_INJECTED',
    
                            inject: {
                                foo: "bar"
                            },
                            // Optional - defaults to 0, no limit.
                            // Routes are rendered asynchronously.
                            // Use this to limit the number of routes rendered in parallel.
                            // maxConcurrentRoutes: 4,
                            // Optional - Wait to render until a certain amount of time has passed.
                            // NOT RECOMMENDED
                            renderAfterTime: 5000, // Wait 5 seconds.
                            // Display the browser window when rendering. Useful for debugging.
                            // headless: false, // TODO 无法开启 电脑配置问题
                            // Optional - Wait to render until the specified event is dispatched on the document.
                            // eg, with `document.dispatchEvent(new Event('custom-render-trigger'))`
                            renderAfterDocumentEvent: "custom-render-trigger",
                            // 更改运行绑定的 Chromium 版本,即:使用本机 chrome 来执行预渲染操作,注意 win、mac、linux 不同环境的路径指定
                            // executablePath: 'Your/Path/Google/Chrome/Application/chrome.exe'
                        })
    
                    }),
    
    
                    // new BundleAnalyzerPlugin(),
                ],
            };
        }
    }
    
    
    
    展开全文
  • vue 实现页面静态化

    万次阅读 2019-09-05 20:04:15
    使用 this.$router.push(location) 来修改 url,完成页面路由跳转 使用params来隐式传递url的参数,它类似post,url看不出,使用query来传递参数的话,类似get,url一定会被格式化为...

    实现思路

    1. 使用 this.$router.push(location) 来修改 url,完成页面路由跳转
    2. 使用params来隐式传递url的参数,它类似post,url看不出,使用query来传递参数的话,类似get,url一定会被格式化为http://www.xxx.com/index?id=123,而不能自定义,以html后缀结尾

    代码示例:

    路由部分

    {
      path: '/share/:detailId',   // path用这种写法是这个思路实现伪静态的核心
      name: 'detailLink',
      component: ArticleDetail
    }

    列表页面事件跳转部分

    checkDetail: async function (articleId, viewCount) {
          // 阅读量自增
          await countPageViews(articleId, Number(viewCount))
          // 伪静态路由跳转
          this.$router.push({name: 'detailLink', params: {detailId: articleId + '.html'}})
        }

     

    详情页面

     

    created: function () {
        console.log(this.$route)
        let obj = {}
        obj.article_id = this.$route.params.detailId.slice(0, -5)
        // 取文章detail数据
        this.$store.commit('setArticles', obj)
      },

    至此,已基本上实现vue的伪静态需求,理论上可以针对任何页面做伪静态

    这里会有一个坑,是这样的,当你同一个路由的时候,只是参数变化了,变化后需要手动刷新,数据才出来,显然是达不到需求的

    修复bug,以上面的编码为示例,逻辑都一样

    把created里的代码,抽取到method里面,使用vue的watch监测路由变化

    created: function () {
      this.getArticleDATA()
    },
    methods: {
      getArticleDATA: function () {
      let obj = {}
      obj.article_id = this.$route.params.detailId.slice(0, -5)
      // 取文章detail数据
      this.$store.commit('setArticles', obj)
      }
    },
    watch: {
      '$route': 'getArticleDATA'
    },

     

     

    展开全文
  • 我们使用vuecli打包出来的vue页面,只有一个html。不错这确实是spa牛逼的地方。但是对于seo来说,这也是一个致命缺陷。那就是,完全没法seo。这货连个实体页面都没有。那就很难受了。此时我们需要借助插件prerender-...

    我们使用vuecli打包出来的vue页面,只有一个html。不错这确实是spa牛逼的地方。

    但是对于seo来说,这也是一个致命缺陷。

    那就是,完全没法seo。这货连个实体页面都没有。那就很难受了。

    此时我们需要借助插件prerender-spa-plugin解决问题。在项目目录输入

    cnpm install prerender-spa-plugin -S-d

    这里你需要注意一点,你现在需要设置你的route为history模式。当然我们一直是这个模式,之前有人使用hash模式,那个是不可取的。

    接着打开webpack.prod.conf.js这个文件在build文件夹中,添加

    const PrerenderSpaPlugin = require('prerender-spa-plugin') //静态化

    然后还是这个文件,找到plugins,在里面加入

    //静态化

    new PrerenderSpaPlugin(

    // npm run build的输出目录

    path.resolve(__dirname, '../dist'),

    // 需要进行预渲染的页面

    ['/', '/components','/download','/articleMain','/test'], {

    captureAfterTime: 5000,

    maxAttempts: 10,

    }

    )

    注意着里面的地址,是生成静态化以后的目录,这里跟你的route地址是对应的。按照你的route来写。

    然后重新输入

    npm run build

    941ada753d5c

    重新打包

    完成后是这样的

    941ada753d5c

    每个route页面都生成了静态页面

    但是

    这只是一个治标不治本的解决办法!因为只有route中的页面被生成了静态页面,我们的内容页面是无法生成静态的。那么这该怎么办呢?如果你既想使用vue那简介的语法进行开发,又希望项目能实现cms那样自动生成静态的功能,你就需要用到一个吊炸天的东西—基于vue的nuxt.js来开发!

    请持续关注龙哥的后续教程!

    展开全文
  • Vue项目如何实现网页静态化

    千次阅读 2019-02-14 09:33:00
    项目是基于webpack创建的Vue2.9.X 项目现在已经完成了,今天老大说需要实现网页静态化。 emmmmm 这个时候百度 Google已经不好使了。 1.有介绍使用vuepress。嗯!发现并不行 各种报错 2.然后看了下使用Nuxt.js 发现...

    项目是基于webpack创建的Vue2.9.X 项目现在已经完成了,今天老大说需要实现网页静态化。 emmmmm 这个时候百度 Google已经不好使了。

    1.有介绍使用vuepress。嗯!发现并不行 各种报错

    2.然后看了下使用Nuxt.js 发现迁移项目是个大麻烦 成本过高

    请问各位大佬 有没有什么解决方案。

    转载于:https://juejin.im/post/5c65356951882562d2742be4

    展开全文
  • 初始并绑定vue首先在自己的网页body内添加一个div包括所有内容,并给这个div设置id如:Document//你的html代码3.创建vue并挂载到页面(如果在单独创建js文件来写,则需在htmll中引入这个js文件)创建如下:window....
  • VuePress – Vue 驱动的静态网站生成器 仓库地址:https://github.com/yinian-R/vuepress-demo 全局安装 ## 安装 yarn global add vuepress # 或者:npm install -g vuepress 现有项目 如果你想在一个现有项目...
  • vue生成静态js文件by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website with Vue.js in no time) You have decided to build a static site, but where ...
  • VuePress 静态网站生成

    2019-02-13 20:51:03
    VuePress - Vue 驱动的静态网站生成器 仓库地址:https://github.com/yinian-R/v... 全局安装 ## 安装 yarn global add vuepress # 或者:npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress...
  • vuepress静态博客搭建

    2021-04-16 10:45:21
    vuepress基本框架搭建 请注意:在搭建vuepress框架前,请先安装 node.js 依赖的软件工具,安装...3、在 boke_vuepress 文件夹下,初始项目,运行指令为:npm init -y 。 4、在 boke_vuepress 文件下,新建 docs 文
  • 在项目中安装prerender-spa-plugin$ npm install --save prerender-spa-plugin 找到bulid目录下的webpack.prod.conf.js文件,在其中写入以下内容: 在文件的上方写入:const PrerenderSpaPlugin = require('...
  • html静态页面通过vue实现数据动态

    千次阅读 2018-06-07 22:24:51
    1.引入vue,引入jQuery(因为等下用Ajax请求数据用到jQuery) 如: &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt; &lt;script src="...
  • vue nuxt生成静态页面

    千次阅读 2018-08-09 11:37:00
    npm install -g vue-cli //安装vue-cli架子 vue init nuxt-community/starter-template <project-name> //安装nuxt npm run dev //开发运行... 如果需要生产静态文件使用命令:npm run generate nux...
  • 配置一个不被编译的静态文件,打包上传服务器后可以直接通过修改dist文件夹中的全局变量而改变代码中的变量。 步骤: 1.在src同级的static文件夹中新增一个staticConfig.js文件 2.为window添加一个对象属性用于...
  • openresty 页面静态化及多级缓存

    千次阅读 2021-03-14 17:47:18
    页面静态化
  • Vue-cli3项目seo优化,静态化打包(动态改变页面Titl、keyWords、description) 文章目录Vue-cli3项目seo优化,静态化打包(动态改变页面Titl、keyWords、description)一 、首先需要两个插件,先安装下来 `...
  • 最近和同事写了个公司的PC官网,综合个人开发习惯、周期以及需求,我最终选择用vue-cli来快捷开发(因为之前已经写好了基于vue-cli的二次定制脚手架)。上线之后,老大说了一句,还是改回静态页吧,SPA的SEO太差啦。...
  • 搭建自己专属的静态网站与云笔记 相关链接: Node.js中文网 VuePress介绍 阿里云ECS开通 搭建步骤 一.安装VuePress 拥有一台阿里云ECS服务器之后,就可以开始准备VuePress的安装。 设置安全组 首先进入阿里云...
  • 记一次nginx部署Vue静态页面

    千次阅读 2018-11-04 17:24:16
    Vue写了个博客,第一次打包后正式部署到服务器上,将其中遇到的问题,及参考的资料分享一下。 服务器准备 本次部署使用的阿里云的ecs云服务器,系统为ubuntu16.04,由于购买的香港地区的服务器,因此无需备案。...
  • 前言「静态节点提升」是「Vue3」针对 VNode 更新过程性能问题而提出的一个优化点。众所周知,在大型应用场景下,「Vue2.x」的 patchVNode 过程,即 diff 过程是非...
  • 项目环境: Nuxt 1.4.5 webPack3.12.0 初期开发部署情况 使用的是 ...静态化部署有2种方式 1:npm run generate 2: num run build (PS: nuxt.config.js 的 config中 需要配置 mode:'spa' ) 部署经过: ...
  • VuePress 开发静态博客

    2020-03-22 02:49:24
    本文,仅针对开发过程的记录,具体配置,请移步 VuePress 官网 AND @vuepress/theme-blog 官网 点击 静态博客 查看线上效果 一、准备工作 创建 github 新项目,并将项目克隆到本地 注意: 创建项目时选择 ....
  • vue,生成静态页面 seo优化

    千次阅读 2019-07-01 09:43:41
    https://www.jb51.net/article/150473.htm
  • 1.引入页面静态化: 类似于京东、天猫等商城的首页频繁被访问,为了提升访问速度,除了使用缓存技术外,还可以使用页面静态化技术。 页面静态化即将动态渲染生成的页面结果保存成html文件,放到静态文件服务器中。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,715
精华内容 10,686
关键字:

vue如何页面静态化

vue 订阅