如何在vue中引入编译版本

如何在vue中引入编译版本？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联是一家集网站建设,叙州企业网站建设,叙州品牌网站建设,网站定制,叙州网站建设报价,网络营销,网络优化,叙州网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

解决方案1

build/webpack.base.conf.js 并设置vue的alias别名，如下：

resolve: {
   alias: {
    vue: 'vue/dist/vue.esm.js'
   }
  }

解决方案2

打开src/main.js修改Vue对象初始化。

new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

改为

new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

原因是，使用 template属性，需要引入带编译器的完整版的vue.esm.js

而如果在.vue文件里面使用

这种形式，然后使用import引入，则不需要完整版的vue.esm.js，因为使用vue-loader时 *.vue文件会自动预编译成js。

其实vuejs官网中已有明确说明

对不同构建版本的解释（https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A）

看完上述内容，你们掌握如何在vue中引入编译版本的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！