以下正文：
在Vue中，通常我们引入一个js插件都是使用
npm
方式下载然后
import
使用的。但是我现在本地有了js文件或者是一个远程js文件链接，我不想使用
npm install xxx
的方式，有什么办法吗？
简单粗暴，直接在Vue项目的
index.html
中使用全局的方式引入，比如：
<!DOCTYPE html>
<title>帮BOSS | 测评</title>
<link type="text/css" href="//at.alicdn.com/t/font_43459_d124thd3lgu.css" rel="stylesheet">
{{ie9 /resources/js/history.min.js}}
</head>
<div id="cp-app" v-cloak></div>
</body>
<script src="../xxx.js"></script> // 暴力引入
</html>
缺点：不使用该js插件的组件也会加载，而我只想在某个Vue组件中使用该js插件。
如果是下载到本地的静态文件，可以使用import 的方式导入。
import { xxx } from '../js/xxx.js'
缺点：下载的静态文件才可以
在Vue组件加载完后，手动操作DOM插入js插件。
export default {
mounted() {
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = '你的js文件地址';
document.body.appendChild(script);
该方式直接操作DOM，只在当前组件插入js插件。
使用render方法
export default {
components: {
'xxx-js': {
render(createElement) {
return createElement(
'script',
attrs: {
type: 'text/javascript',
src: '你的js文件地址',
高阶玩法。将方式三包装成一个js插件，使用 Promise，js加载成功，调用resolve，js加载失败，调用reject。
function loadJs(src) {
return new Promise((resolve,reject)=>{
let script = document.createElement('script');
script.type = "text/javascript";
script.src= src;
document.body.appendChild(script);
script.onload = ()=>{
resolve();
script.onerror = ()=>{
reject();
export default loadJs
使用的时候：
import loadJs from '../../utils/base/loadJs'
export default {
mounted(){
loadJs('http://api.map.baidu.com/xxx.js').then(()=>{
更高阶方式。可以动态替换要加载的js文件。
包装一个importJs.js 插件。
import Vue from 'vue'
Vue.component('remote-script', {
render: function (createElement) {
var self = this;
return createElement('script', {
attrs: {
type: 'text/javascript',
src: this.src
on: {
load: function (event) {
self.$emit('load', event);
error: function (event) {
self.$emit('error', event);
readystatechange: function (event) {
if (this.readyState == 'complete') {
self.$emit('load', event);
props: {
src: {
type: String,
required: true
使用方式：
import 'common/importJs.js'
<remote-script src="https://pv.sohu.com/cityjson?ie=utf-8"></remote-script>
最近热门文章：
图片瀑布流，就是如此简单（so easy）
梳理ajax跨域常用4种解决方案（简单易懂）
Vue.js命名风格指南（易记版）
以上，如果你看了觉得对你有所帮助，就点个赞叭，这样Daotin也有更新下去的动力，跪谢各位父老乡亲啦~~~ 听说喜欢点赞的人，一个月内都会有好运降临哦 ~~
- 6959
-
独立开发者张张
Vue.js
JavaScript
