需求是分享出去一個鏈接，打開後是一個頁面，頁面中的數據都是在前端的，只不過是只顯示一部分，根據用户的操作顯示相應的數據，比如説拖動滑動條改變年份，顯示不同年份的數據

之前是把頁面和樣式都放在後端，頁面中寫好處理邏輯，後端只需要往頁面中塞數據就行了，前端分享鏈接出去之後點開就能看，

但是現在服務器只能內網訪問，所以就需要把頁面放到前端，但數據又只能塞進頁面，不能通過接口獲取（也不是不能，只是由於項目特點的原因 數據計算過程很複雜而且很耗時）

所以只能讓後端把塞好數據的頁面代碼傳過來，前端再渲染

起初我想用v-html指令來處理，然後發現頁面中的{{name}}不能解析，看了一下官網，人家特意説明了一下不能編譯模板，所以只能想其他辦法了

 網上所以一圈覺得用v-runtime-template比較靠譜

首先還是需要裝一個依賴

npm install v-runtime-template

在vue.config.js文件中加一行代碼，不然會報錯，當時就是忽略了這一點導致浪費了好長時間

module.exports = {
  runtimeCompiler: true
};

然後就可以把請求接到的前端代碼放進模板中了，像這樣

1 <template>
 2     <div>
 3         <v-runtime-template :template="template"></v-runtime-template>
 4     </div>
 5 </template>
 6 
 7 <script>
 8 import VRuntimeTemplate from "v-runtime-template";
 9 import AppMessage from "./AppMessage";
10 
11 export default {
12   data: () => ({
13     name: "Mellow",
14     template: `
15       <app-message>Hello {{ name }}!</app-message>
16     `
17   }),
18   components: {
19     AppMessage,
20     VRuntimeTemplate
21   }
22 };
23 </script>

但是當時還是遇到了點其他問題，console會有報錯，原因應該是頁面還未渲染完成就加載了相應的methods中的方法，導致undefined

解決辦法就是用this.$nextTick( () => { }  )，操作頁面數據的方法在箭頭函數裏面調用應該就沒什麼問題了

在分享按鈕那個頁面中分享方法和上一篇的分享pdf一樣，都是分享一個鏈接，點擊鏈接發送請求，獲取到數據，再在html頁面進行具體操作

var params = { webPageUrl: fontEndUrl + '/previewHtml?htmlNo='+ htmlNo };

v-runtime-template參考鏈接：https://github.com/alexjoverm/v-runtime-template

補充：

後來發現前段項目打包之後分享出去的html頁面顯示不出來，查看報錯信息推測是頁面元素未成功加載，查閲相關資料後得知是v-runtime-template這個組件打包後不能用，

解決辦法：在vue.config.js中runtimeCompiler:true，下加上一個webpack配置

configureWebpack: {
    resolve: {
        alias: {
            vue$: "vue/dist/vue.common"
        }
    }
},