在SSR中使用CDN而不是vendor.js

时间:2018-08-01 17:04:02

标签: webpack vue.js ssr webpack-externals

您如何为供应商使用CDN而不是巨型的vendor.js文件。

它无需使用ssr就可以工作:

webpack配置:

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':’Vuex',
    'axios': 'axios’,
    'element-ui':'ELEMENT',
}

html:

<body>
<div id="app">
    <!--vue-ssr-outlet-->
</div>
<script src="/static/cdn/vue/2.5.2/vue.min.js" charset="utf-8"></script>
<script src="/static/cdn/vuex/2.4.1/vuex.min.js" charset="utf-8"></script>
<script src="/static/cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
<script src="/static/cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
<script src="/static/cdn/element-ui/2.0.5/index.js" charset="utf-8"></script>

使用ssr时出错,它将报告以下错误:

{ Error: Cannot find module 'Vue'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at r (/Users/cheng.ding/Documents/venus-help/node_modules/vue-server-renderer/build.js:8335:16)
at Object.<anonymous> (webpack:/external "Vue":1:0)
at __webpack_require__ (webpack:/webpack/bootstrap af1c992c23b548bc1ad5:25:0)
at Object.<anonymous> (server-bundle.js:7024:62)
at __webpack_require__ (webpack:/webpack/bootstrap af1c992c23b548bc1ad5:25:0)
at Object.<anonymous> (server-bundle.js:5967:63)
at __webpack_require__ (webpack:/webpack/bootstrap af1c992c23b548bc1ad5:25:0)
at server-bundle.js:92:18
at Object.<anonymous> (server-bundle.js:95:10)
at evaluateModule (/Users/cheng.ding/Documents/venus-help/node_modules/vue-server-renderer/build.js:8338:21)
at /Users/cheng.ding/Documents/venus-help/node_modules/vue-server-renderer/build.js:8396:18
at new Promise (<anonymous>) code: 'MODULE_NOT_FOUND' }

0 个答案:

没有答案