Is it possible to build a Standalone Vue app?

扶醉桌前 提交于 2021-01-29 05:16:57

问题


Is it possible to build a Vue app, which does not require Vue as as a dependency at runtime?

I.e. instead of the browser having to load the vue.js and the app like this

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://www.myxyzhost.com/my-app.js"></script>

have a my-app.js which already includes vue.js, so that including the script in a web page becomes a simple one liner?

<script src="https://www.myxyzhost.com/my-app.js"></script>

回答1:


So, it was actually simpler than I thought:

I just created a separate entry file for webpack to consume like

my-custom-component-entry.js

and slammed everything I needed in there (vue and the respective component):

// This is the actual solution, I was looking for.
import Vue from 'vue';
import MyCustomComponent from './components/my-custom-component.vue'; 

new Vue({
  components: {
    'my-custom-component': MyCustomComponent
  } 
}).$mount('#app'); // ya gotta have a #app element somewhere of course

And then I built it with webpack (I am not going into detail here).

Now everything is packed in on file. No separate Vue runtime, which a customer might need to install. All that's necessary is:

<script src="https://www.myxyzhost.com/dist/my-custom-component.js"></script>

And yes, as always, this screws up, if you don't add the proper polyfills for internet explorer, but I take that for granted.

The important thing: for modern browsers it's a one liner which makes it easier to sell. That was all I needed.



来源:https://stackoverflow.com/questions/53113321/is-it-possible-to-build-a-standalone-vue-app

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!