1.長按保存圖片

借助html2canvas插件生成圖片，微信瀏覽器自帶保存圖片功能實現(xiàn)
①安裝插件: yarn add html2canvas
②頁面引入:import html2canvas from 'html2canvas'
③使用：

let _this = this
html2canvas(document.getElementById('imageTofile'), {  // 要生成圖片的dom
   useCORS:  true
}).then(canvas => {
   let url = canvas.toDataURL('image/jpeg', 0.7)
   _this.htmlUrl = url // 
   console.log('生成圖片')
}

注意：由于在生成圖片的dom中也包含圖片（在項目最后一頁，生成圖片時dom不在可視區(qū)域內(nèi)），dom結(jié)構(gòu)的圖片不可使用懶加載

2.weixin-js-sdk配置問題

從后臺請求獲取微信配置信息，簽名不合法，需要回傳當(dāng)前url,要編碼

wxSet () {
    let _this = this
    getWxConfig({
        params: ''\"" + encodeURIComponent(window.loacation.href.splip('#')[0]) + "\"",
        headers: { 'content-type': 'application/json' }
    }).then(res => {
        _this.$wx.config({
            debug: false,
            appId: res.data.data.appId,
            timestamp: res.data.data.timestamp,
            nonceStr: res.data.data.nonceStr,
            signature: res.data.data.signatrue,
            jsApiList: [ 'updateAppMessageShareData', 'updataTimelineShareData']
        })
    }).catch(error => {
    })
}

微信配置信息從后臺請求，需要一定的響應(yīng)時間，weixin-js-sdk未配置完成就執(zhí)行分享操作，則會默認講頁面參數(shù)分享出去，為了用戶安全，進入頁面后立即替換頁面鏈接，借助sessionStorage存貯參數(shù)，如果無參數(shù)則跳轉(zhuǎn)至微信授權(quán)頁

router.beforeEach((to, from, next) => {
    if (to.query.channel) {
        window.sessionStorage.setItem('query', JSON.stringify(to.query))
        window.location.replace(to.path) // 清除參數(shù),也可以用router.replace(to.path)，但是在anriod中頁面加載時會刷新，ios用戶則無感知
    } else {
        if (JSON.parse(sessionStorage.getItem('query')) {
          next()  
        } else {
           window.location.replace('https://open.weixin.qq.com/........')
        }
    }
}

3. vue/cli3打包優(yōu)化，聯(lián)合nginx配置

vue/cli3默認打包之后，js和css的體積過大，影響資源加載速度，解決方案，打包成.gz文件，相應(yīng)的需要修改nginx配置
打包生成.gz文件的配置:
①安裝插件：yarn add compression-webpack-plugin -D
②在vue.config.js中配置：

    const CompressionPlugin = require('compression-webpack-plugin')
    module.exports = {
        configureWebpack: config => {
            if (process.env.NODE_ENV == 'production' ) {
                return {
                    plugins: [new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/,
                        threshold: 10240, // 對超過10k的文件進行壓縮
                        deleteOriginalAssets: false, //是否刪除原文件
                    })]
                }
            }
        }
    }

4. vue/cli3打包后link預(yù)告加載js文件

在打包好后的文件中index.html文件中，會有l(wèi)ink引入js文件，并有屬性ref="preload"，即告訴瀏覽器這個文件是一定會加載的，如果想去掉這個preload,在vue.config.js中配置

chainWebpack: config => {
    config.plugins.delete('preload')
}

5.一個非常簡單的css,文本溢出省略

p{width: 500px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;}

省略號的顏色和p顏色相同