vue項目分享html頁面（服務器只能內網訪問）

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

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

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

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

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

 

 

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

首先還是需要裝一個依賴

npm install v-runtime-template

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

module.exports = {
  runtimeCompiler: true
};

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

<template>
    <div>
        <v-runtime-template :template="template"></v-runtime-template>
    </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";
import AppMessage from "./AppMessage";

export default {
  data: () => ({
    name: "Mellow",
    template: `
      <app-message>Hello {{ name }}!</app-message>
    `
  }),
  components: {
    AppMessage,
    VRuntimeTemplate
  }
};
</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"
        }
    }
},