vuecli怎么获取vue实例？？

发布于
2020-05-26

最近做一个项目需要从外部获取到vue实例。如果是通过<script>标签插入一个vue.js 是可以通过window.Vue获取到，但是如果是vuecli的打包项目的话 window上并没有挂载，不知道怎么才能在html【不希望从main.js拿vue做后续操作】这里拿到当前vue的实例？先谢谢大家了哈

vue.js webpack 前端

阅读 5.1k

2 个回答

得票最新

君迹我心

5.1k41927

发布于
2020-05-26

✓ 已被采纳

没有自动挂载到 window的话就手动把它暴露出来：

window.vueApp = new Vue(options);

当然，可以这样做的前提是能改 Vue 应用的代码。
如果可以访问到 Vue 类的话，也可以劫持其原型链方法：

window.vueApps = [];
const originMethod = Vue.prototype._render;
Vue.prototype._render = function(...args){
    if(!window.vueApps.includes(this)){
        window.vueApps.push(this);
    }
    return originMethod.bind(this)(...args);
}
// 然后从 vueApps 找自己需要的那一个实例

当然，劫持的不一定是 _render 函数，可能还有其他更好使的函数。

kkopite

2.1k1913

发布于
2020-05-26

你还是可以直接通过插入<script>引入vue，然后直接从window上获取Vue

在index.html上引入vue

// public/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

然后配置externals

// vue.config.js
module.exports = {
  ...
  configureWebpack: {
    externals: {
        'vue': 'Vue'
    }
  }
}

然后就可以直接从window.Vue 拿到了

不过你都用vue-cli, 为毛还要在外面拿Vue

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

vuecli怎么获取vue实例？？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？