引入外部js文件


1.在根目录创建文件夹,例如‘libs’,将js文件拷贝至libs目录下

2.修改webpack.dev.conf.js和webpack.prod.conf.js,在CopyWebpackPlugin下添加以下代码

new CopyWebpackPlugin [
....
{
from: path.resolve(__dirname, '../libs'),
to: './'
}
]

运行npm run build后,libs下的js文件会被放到dist目录下,组件内可以直接使用js文件内的方法

参照博客,前往>>>

vue启动ip与localhost访问


本地调试,运行npm run dev后,我们可以在地址栏中输入localhost+端口号访问我们的vue应用,但如果我们想要使用ip地址实现局域网内访问的话怎么办呢?

非常方便的是,我们只需要将config/index.js中dev下的【host】配置为本机的内网ip地址即可

dev:
{
env: require('./dev.env'),
port: 8888,
host: '192.168.1.101',
......
}

但是这样的话本地localhost就没法访问了,如果本地使用了代理啥的还得去更改,那localhost和ip能不能都可以呢?--可以的,操作如下:

1.上面更改的地方将host改为'0.0.0.0'

2.package.js文件scripts节点下的dev节点末尾,增加'--host 0.0.0.0'

再次运行npm run dev,你会发现localhost和ip都可以访问了

vue使用技巧的更多相关文章

  1. vue的技巧代码

    转载:https://segmentfault.com/a/1190000014085613 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList ...

  2. vue小技巧之偷懒的文件路径——减少不必要的代码

    众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import  '../../../s ...

  3. vue 使用技巧总结 18.11

    前言: 在大概学完 vue 整体框架后,有幸接触到花裤衩大神写的 vue-elementUI-admin 模板框架,把这个模板框架当作 demo,跟着 code 一遍,最大的收获是在以逻辑简单的模板熟 ...

  4. Vue 开发技巧或者说Vue知识点梳理(转,自个学习)

    Vue 组件通讯 ——常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($parent / $child ...

  5. Vue 开发技巧总结

    ​博客地址:https://ainyi.com/95 本人玩了 Vue 两年多,在此总结一下开发时的一些技巧和方法 自定义组件 v-model v-model 是 Vue 提供的一个语法糖,它本质上是 ...

  6. vue使用技巧(分页、nextTick、复制对象)

    分页技巧 v1.0+ 版本的时候使用过滤器 limitBy 实现 v2.0+ 版本的时候使用compute使用 slice 方法实现 data:{ pageNum:10 }, computed:{ n ...

  7. Vue小技巧-懒加载

    Vue懒加载包括图片懒加载与路由懒加载 1.图片懒加载: 首先安装 vue-lazyload包 然后导入并加载事先下载好的加载图片 import VueLazyLoad from 'vue-lazyl ...

  8. 教你一个vue小技巧,一般人我不说的

    本文由云+社区发表 1. 需求 最近的项目中,需要实现在vue框架中动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项,可以将 ...

  9. vue 使用技巧总结 19.01

    组件中箭头函数的使用 不要使用箭头来定义任意生命周期钩子函数: 不要使用箭头来定义一个 methods 函数: 不要使用箭头来定义 computed 里的函数: 不要使用箭头定义 watch 里的函数 ...

  10. Vue小技巧,如何导入普通JS文件

    最近在开发一个展示3D模型的WEB程序,在工程中使用了VUE和ThreeJS库.Three.js本身是支持CommonJS的,但我们还用到了OBJLoader模块,此模块不支持CommonJS,改成C ...

随机推荐

  1. Educational Codeforces Round 76 (Rated for Div. 2) A. Two Rival Students 水题

    A. Two Rival Students There are

  2. python奇闻杂技

    第一天 01 从计算机到程序设计语言 02 python环境配置 03 实例一:温度转换 04 python语法分析 第二天 01 深入理解python语言 02 实例二,python蟒蛇配置 03 ...

  3. 再一次生产 CPU 高负载排查实践

    前言 前几日早上打开邮箱收到一封监控报警邮件:某某 ip 服务器 CPU 负载较高,请研发尽快排查解决,发送时间正好是凌晨. 其实早在去年我也处理过类似的问题,并记录下来:<一次生产 CPU 1 ...

  4. 理解Promise.all,Promise.all与Promise.race的区别,如何让Promise.all在rejected失败后依然返回resolved成功结果

     壹 ❀ 引 我在 es6入门4--promise详解 这篇文章中有详细介绍Promise对象的用法,文章主题更偏向于对于Promise概念的理解与各方法基本使用介绍:而世上一个比较有趣的问题就是,即 ...

  5. springboot-热部署Jrebel

    1. 场景描述 介绍下idea+springboot下的热部署插件-Jrebel,贼好用,以前用过好多种,但是总出现不稳定或者会莫名其妙的没有部署新代码. 2.解决方案 springboot自带的de ...

  6. oracle视图和索引

    视图和索引 视图 视图的作用 控制数据访问.简化查询.避免重复访问相同的数据 视图的优点 限制用户只能通过视图检索数据,用户看不到底层基表 注意事项 视图可以理解为临时表,会随着真实表的数据变化而自动 ...

  7. MongoDB for OPS 04:备份恢复

    写在前面的话 和 MySQL 一样,mongodb 也是需要将数据进行备份的,毕竟天有不测风云,谁也不知道哪天机器就炸了. 备份恢复 mongodb 提供了两种备份恢复手段:mongoexport / ...

  8. webpack+vue路由

    只写路由部分的相关内容 需引入路由包 import Vue from 'vue' // 1. 导入 vue-router 包 import VueRouter from 'vue-router' // ...

  9. Flask 教程 第三章:Web表单

    本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你如何使用Web表单. 在第二章中 ...

  10. js监听屏幕方向如何第一次默认不监听

    this.supportOrientation = typeof window.orientation === 'number'; // 检查屏幕方向 checkScreenOrientation() ...