①：运行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. HTTP常见的几种认证机制

    几种常用的认证机制 ===================转自https://www.cnblogs.com/xiekeli/红心李的文章====================== 我是一个测试人员 ...

  2. 恢复Chrome 78以上版本的地址栏https和www显示

    Google在Chrome不知道是脑子抽抽还是怎么回事,非要把https://www从地址栏中隐藏掉. htttps://www.pool.ntp.org就给你显示个pool.ntp.org,这分明就 ...

  3. Pycharm新手使用教程(详解)

    Pycharm新手使用教程(详解) [注]: 如果想要下载Pycharm工具,直接去<开发工具>中进行下载. 简介 Jetbrains家族和Pycharm版本划分: pycharm是Jet ...

  4. [目录] -- 计划翻译一些有关CLR/C#的基础内容，希望能坚持下去

    主要内容有以下部分(URL待补充): CLR 和Windows Loader 加载.NET Assembly的过程 CLR加载失败分析分析 Windows内存架构模型,分配内存及垃圾回收 其他带补充的 ...

  5. go-客户信息关系系统

    客户信息关系系统 项目需求分析 1) 模拟实现基于文本界面的< 客户信息管理软件>. 2) 该软件能够实现对客户对象的插入.修改和删除(用切片实现),并能够打印客户明细表 项目的界面设计 ...

  6. PHP+Ajax手机移动端发红包实例

    基本流程:当输入完红包数量和总金额后,PHP会根据这两个值进行随机分配每个金额,保证每个人都能领取到一个红包,且每个红包金额不等,并且所有红包金额总额等于总金额. 实现原理:设定总金额为10元,有N个 ...

  7. react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

    一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN ...

  8. Python图像处理库Pillow常用使用方法

    PIL(Python Imaging Library)是Python一个强大方便的图像处理库,只支持到Python2.7.Pillow是PIL的一个派生分支,在Python3中用Pillow代替PIL ...

  9. SQL学习_SELECT

    查询列: SQL:SELECT name FROM heros 多列查询: SQL:SELECT name, hp_max, mp_max, attack_max, defense_max FROM ...

  10. js 常用工具方法

    1.格式化字符串 String.prototype.format = function () { let args = arguments; return this.replace(/\{(\d+)\ ...