Question

我正在尝试在Visualforce（salesforce）上使用Vue.js.这是我到目前为止所做的。

使用vue-cli生成Vue.js应用程序，构建它

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

拉上dist文件夹
```
zip -r VueSample ./dist/*
```
在Salesforce中创建静态资源（名称：VueSample，文件：VueSample.zip）
创建Visualforce页面

编辑：在下面的示例中添加apex：page标记。最初，它没有显示，因为我没有在降价编辑器中放置正确的空格

    <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页面中更改文件哈希。我应该停止添加哈希吗？

Answer 1

在我看来，首先你应该为页面使用标准的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和sidebar，有时它会影响Visualforce页面上自定义脚本的行为：

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

我建议您阅读series of articles关于在Visualforce上使用Vue.js，特别是part 2和part 3，有很多有用的细节。

Answer 2

问题是javascript代码执行的时间。使用apex：includeScript标记，最终将javascript文件放在head标记中，并在div＃app准备好之前执行app.js。为此，可以使用loadOnReady=“true"属性。

我只向app.js添加了loadOnReady=“true"，因为将它添加到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。

Vue.js在Visualforce中不起作用

2 个答案: