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中不起作用

回答

相关问题