Vue.js在Visualforce中不起作用

我試圖在Visualforce上使用Vue.js（salesforce）。這是我到目前爲止所做的。Vue.js在Visualforce中不起作用

生成與VUE-CLI Vue.js應用，建立它

vue init webpack vue-sample 
cd vue-sample 
yarn 
yarn build

拉上DIST文件夾
```
zip -r VueSample ./dist/* 
```
創建靜態資源在Salesforce （名稱：VueSample， File：VueSample.zip）
Create Vi強制頁面

編輯：在下面的示例中添加apex：頁面標記。起初，我並沒有把正確的空間，在降價編輯

<apex:page id="VueSample" showHeader="false" cache="false" 
      standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0"> 

    <html> 
    <head> 
     <meta charset="utf-8"></meta> 
     <title>Vue Sample</title> 
     <apex:stylesheet value="{!URLFOR($Resource.VueSample, 'dist/static/css/app.090f1fe8ffa03cdc03a19db87af18abe.css')}"/> 
    </head> 
    <body> 

    <div id="app"></div> 

    <apex:includeScript value="{!URLFOR($Resource.VueSample, 'dist/static/js/manifest.a5a27e99ade9f48f7f62.js')}"/> 
    <apex:includeScript value="{!URLFOR($Resource.VueSample, 'dist/static/js/vendor.ae75c6b5bea60f5d8cec.js')}"/> 
    <apex:includeScript value="{!URLFOR($Resource.VueSample, 'dist/static/js/app.3c76c2b4382e06be5fe2.js')}"/> 

    </body> 
    </html> 

    </apex:page>

，如果我打開這個網頁Visualforce它不顯示，將顯示任何內容。我檢查了Chrome的控制檯，我可以看到javascript文件和靜態資源中的css文件在瀏覽器中正確下載，並且在開發人員控制檯中也沒有顯示任何錯誤。我在這裏錯過了什麼？爲什麼我看不到任何東西？

請讓我知道在這裏處理文件名稱的散列的最佳方式。每當我上傳新資源包時，我不想在visualforce頁面中更改文件哈希。我應該停止添加散列嗎？

來源

2017-08-24 Hiro

在我看來，首先，你應該使用標準Visualforce標籤結構的網頁：

<apex:page> 
    <div id="app"></div> 
    <!--List all script files from static resource--> 
    <apex:includeScript value="{!URLFOR($Resource.VueSample, '/path/to/your/script.js')}"/> 
</apex:page>

另外，我想建議你包括<apex:page>標籤附加屬性，如applyHtmlTag，showHeader和側邊欄，有時它會影響Visualforce頁面自定義腳本的行爲：

<apex:page applyHtmlTag="false" showHeader="false" sidebar="false">

而且我想建議你閱讀series of articles有關使用Vue.js上Visualforce，特別part 2和part 3，有很多有用的細節。

來源

2017-08-25 09:45:17

Hleb，謝謝指出。我最初公佈的Visualforce的代碼部分未正確顯示apex：頁面標記。縮減編輯器中的縮進數量是錯誤的。我實際上一直在使用標準的Visualforce標籤。我編輯了代碼。我發現了這個問題。我將在下面添加答案。您給我的鏈接中的文章也指出了第3部分中的相同內容。感謝您的幫助。 – Hiro

問題在於JavaScript代碼執行的時機。使用apex：includeScript標記，javascript文件最終放置在head標記中，並且在div＃app準備就緒之前執行app.js。爲此，loadOnReady=「true"屬性可以使用。

我只添加了loadOnReady=「true"到app.js，因爲將它添加到vendor.js，頁面加載變得非常慢。我相信vendor.js不必等待準備好的事件。我想在頁面底部使用正常的腳本標籤，這在Hleb發佈的文章中建議，也將解決問題。

這是我做的。

<apex:page id="VueSample" showHeader="false" cache="false" 
     standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0"> 
<html> 
<head> 
    <meta charset="utf-8"></meta> 
    <title>Vue Sample</title> 
    <apex:stylesheet value="{!URLFOR($Resource.VueSample, 'dist/static/css/app.css')}"/> 
</head> 
<body> 

<div id="app"></div> 

<apex:includeScript value="{!URLFOR($Resource.VueSample, 'dist/static/js/vendor.js')}"/> 
<apex:includeScript loadOnReady="true" value="{!URLFOR($Resource.VueSample, 'dist/static/js/app.js')}"/> 
</body> 
</html> 
</apex:page>

我還修改了webpack.prod.conf。js，以便webpack不會爲文件名稱添加散列，並且在構建新的靜態資源時不必更改Visualforce頁面。

--- build/webpack.prod.conf.js (date 1503464009000) 
+++ build/webpack.prod.conf.js (date 1503628466000) 
@@ -23,8 +23,7 @@ 
    devtool: config.build.productionSourceMap ? '#source-map' : false, 
    output: { 
    path: config.build.assetsRoot, 
- filename: utils.assetsPath('js/[name].[chunkhash].js'), 
- chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 
+ filename: utils.assetsPath('js/[name].js') 
    }, 
    plugins: [ 
    // http://vuejs.github.io/vue-loader/en/workflow/production.html 
@@ -39,7 +38,7 @@ 
    }), 
    // extract css into its own file 
    new ExtractTextPlugin({ 
-  filename: utils.assetsPath('css/[name].[contenthash].css') 
+  filename: utils.assetsPath('css/[name].css') 
    }), 
    // Compress extracted CSS. We are using this plugin so that possible 
    // duplicated CSS from different components can be deduped. 
@@ -83,10 +82,10 @@ 
    }), 
    // extract webpack runtime and module manifest to its own file in order to 
    // prevent vendor hash from being updated whenever app bundle is updated 
- new webpack.optimize.CommonsChunkPlugin({ 
-  name: 'manifest', 
-  chunks: ['vendor'] 
- }),

Vue.js現在適用於Visualforce。

來源

2017-08-25 14:00:48 Hiro

Vue.js在Visualforce中不起作用

回答

相關問題