①：运行npm run dev 后自动打开浏览器

　　　   首先找到config里面的index.js文件，然后打开找到autoOpenBrowser属性，把默认的false改为true即可

　　　　

　　②：简写路径（比如把 ../src/pages/home/Home 改写为   @/pages/home/Home）

　　　　首先找到build文件夹里面的webpack.base.conf.js文件，

　　　　

　　　　  然后双击打开该文件，找到红色框区域的地方（34行，如果之前没有改过原配置的话）

　　　　 

　　　　　这里的@指代src路径

　　　　   

　　　　　  因为有上面的设置，所以下面引入组件的路径可以由 ../src/pages/home/Home 改写为   @/pages/home/Home（这里的后缀.vue可省略）

　　　　

　　　　    上面是webpack默认的配置，我们也可以自己配置

　　　　

　　　　    设置后，styles就可替代src/assets/styles

　　　　

　　　　 　这时会报错

　　　　

　　　　重新设置webpack配置项以后需要先ctrl+c关闭服务，在npm run dev重启即可

webpack-实用的2个配置的更多相关文章

  1. webpack实用配置

    前面的话 上文介绍了webpack入门,本文将详细介绍webpack实用配置 版本号 以entry.js打包为bundle.js为例,出口的filename可以设置为[id].[name].[hash ...

  2. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  3. webpack处理url资源的配置

    webpack处理url资源的配置 1.安装 npm i url-loader -D 2.修改webpack.config.js const path = require('path'); // 启用 ...

  4. webpack 功能大全 【环境配置】

    1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...

  5. webpack中typeScript的打包配置

    2018年typescript发展的非常好,js是一门非常灵活的语言,所以一个功能,怎么写都能够写出来,但是这也会导致一个问题,不同人写js的方式不同,那么会导致同一个功能出现的代码风格会迥然不同.这 ...

  6. webpack(2)--webapck自身的配置

    上一记介绍了webpack的安装和基本配置,本记将描述webpack自身的配置 一:指定webpack入口以及出口目录以及输出文件 相信读者在看完上一记后会有一点疑惑:为什么运行webpack要配置s ...

  7. webpack 实用配置总结

    1.webpack.config.js配置文件为: //处理共用.通用的js var webpack = require('webpack'); //处理html模板 var htmlWebpackP ...

  8. webpack实用配置总结

    1.webpack.config.js配置文件为: //处理共用.通用的js var webpack = require('webpack'); //处理html模板 var htmlWebpackP ...

  9. webpack实用小功能介绍

    1.overlay overlay属于devServer的属性,配置案例如下: ? 1 2 3 4 5 6 devServer: {  overlay: {   errors: true,   war ...

  10. webpack构建vue项目（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

随机推荐

  1. 三、动态SQL

    动态SQL MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑. 动态SQL的元素 元素 作用 备注 if 判断语句 单条件分支判断 choose.whe ...

  2. vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...

  3. 关于 ASP.NET Core 中的 OData

    1. BooksController using BooksODataService.Models; using Microsoft.AspNet.OData; using Microsoft.Asp ...

  4. 黄聪：wordpress登录后台后load-scripts.php载入缓慢

    今天一个微信群里一个好友问大鸟,他的wordpess后台载入非常缓慢,缓慢到什么程度,我们看图: 这个真的是超级慢了,这类问题怎么解决呢,我们登录后台后,按下F12打开控制台,接着点击network, ...

  5. 如何让Python爬虫一天抓取100万张网页

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 王平 源自:猿人学Python PS:如有需要Python学习资料的 ...

  6. python数据可视化简介(一)

    目录 一:配置jupyter notebook 二:Matplotlib图像实例   数据可视化是用图形或者表格的形式进行数据显示,用图形化的手段,清晰有效地传递与沟通信息.既要保证直观易分析,又要保 ...

  7. LinuxShell脚本——选择结构

    LinuxShell脚本——选择结构 摘要:本文主要学习了Shell脚本中的选择结构. if-else语句 基本语法 最简单的用法就是只使用if语句,它的语法格式为: if 条件 then 命令 fi ...

  8. Spring Boot 之异步执行方法

    前言: 最近的时候遇到一个需求,就是当服务器接到请求并不需要任务执行完成才返回结果,可以立即返回结果,让任务异步的去执行.开始考虑是直接启一个新的线程去执行任务或者把任务提交到一个线程池去执行,这两种 ...

  9. .net core 使用ViewComponent

    .net core 中的局部视图组件是ViewComponent,可以用于建制重复使用公共功能组件 一.新建一个类DemoViewComponent(必须以ViewComponent结尾)且继承Vie ...

  10. 干货，Wireshark使用技巧-过滤规则

    - 过滤规则使用 在抓取报文时使用的规则,称为过滤规则,Wireshark底层是基于Winpcap,因此过滤规则是Winpcap定义的规则,设置过滤规则后,抓到的报文仅包含符合规则的报文,其它报文则被 ...