①：运行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. 洛谷 P2176（最短路）

    ###题目链接 洛谷 P2176 ### 题目大意: 已知农夫从 1 走到 N 点,一定走的是最短路.问你将某条路的长度变为其两倍后,农夫从 1 走到 N 点的路程最大增加多少,输出最大增量. 分析: ...

  2. MySQL for OPS 12：锁处理

    写在前面的话 在前面的内容中提到过,在以前的 MyISAM 中锁是表级锁,InnoDB 是行级锁.这个锁到底是啥样,怎么找出来,这一节就主要做这个. 定位锁的问题 上一节我们创建了一个 1000万数据 ...

  3. 利用内存锁定技术防止CE修改

    利用内存锁定技术防止CE修改 通过这种在R3环利用的技术,我们可以来达到保护内存的目的,像VirtualProtect等函数来修改页属性根本无法修改. 而CE修改器推测应该使用VirtualProte ...

  4. excel 知识备忘

    public void UpdateShapesColor(string value) { foreach (Microsoft.Office.Interop.Excel.Shape chart in ...

  5. 用PHP写出计算器

    <body> <?php if (!empty($_POST)) { $op=$_POST['point']; $sum1 = $_POST['sum1']; $sum2 = $_P ...

  6. Sublime设置格式化代码快捷键ctrl+shift+r

    1.以管理员身份运行sublime 2.首选项---按键绑定-用户,将以下代码复制即可(这里注意不要忘记在最后一行添加逗号哦) { "keys": ["ctrl+shif ...

  7. 安全意识第三期丨关于高速ETC办理的这些新骗局，速看！

    近期,最火爆的莫过于ETC了. 不仅各大银行,甚至微信和支付宝都推出了办理服务. 虽说更加便捷了,却也带来了安全隐患. 下面这个案例,大家一定要注意,已经有很多车主“中招”,落入了骗子的圈套. 注意: ...

  8. 微信语音短消息amr文件转WAV

    - amr说明 - 转WAV程序 我对SILK编码库稍作修改,编译了一个Windows下可直接将SILK V3编码转换为WAV格式,并支持原生的微信语音短消息amr文件的版本,提供给大家使用,压缩包( ...

  9. FastJSON使用例子

    FastjsonTest.java package demo; import java.util.ArrayList; import java.util.Date; import java.util. ...

  10. Vue实战狗尾草博客管理平台第六章

    Vue实现狗尾草博客后台管理系统第六章 本章节内容 文章列表 文章详情 草稿箱 文章发布. 本章节内容呢,开发的很是随意哈,因为多数就是element-ui的使用,熟悉的童鞋,是可以很快完成本章节的内 ...