①：运行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. win7和win10自带桌面便签哪里找

    一些小伙伴习惯使用windows自带的便签功能,但win7和win10区别较大, 导致更新系统后不知道在哪里找,甚至以为没有该功能了, 其实不然,下面我总结了2种方法,希望能帮到有需要的人 win7( ...

  2. Java 8，Jenkins，Jacoco和Sonar进行持续集成

    技术环境 在以安全与质量为主要驱动力的项目中,CI至关重要. 因此,我从我的团队开始进行"概念验证",以表明以下技术已准备好协同工作: Java 8, NetBeans 8.0 & ...

  3. MongoDB系列---集合与文档操作03

    MongoDB-——Collection 学习大纲: 1.集合操作 2.文档操作 知识回顾: 上一篇我们讲述了如何对MongoDB的权限和用户进行日常的基本操作,来达到我们对数据库的基本安全保障. 一 ...

  4. 练手WPF（三）——扫雷小游戏的简易实现（上）

    一.创建项目1.创建WPF项目,设置初始化窗口大小(初级难度):高x宽为430x350.2.添加文件夹Images,并添加相关图片. 3.xaml中引入图片资源. <Window.Resourc ...

  5. hive creating temporary folder on: Error encountered near token 'TOK_TMP_FILE'

    执行create tmp.tablename  as select .....语句的时候报以下错误: SemanticException 0:0 creating temporary folder o ...

  6. JQuery操作样式以及JQuery事件机制

    1.操作样式     1.1 css的操作     功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

  7. 剑指offer 20：顺时针打印矩阵

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...

  8. Vue实战狗尾草博客管理平台第四章

    本章主要内容如下: 填补上期的坑. iconfont仓库的关联,引入. 开发登录页面 填坑 上期中我们功能都已正常使用.但不知道有没有小伙伴测试过error页面,当访问地址不存在时,路由是否能正常挑战 ...

  9. nginx 配置实例-负载均衡

    1.实现效果 (1)浏览器地址栏输入地址 http://www.123.com/edu/a.html,负载均衡效果,平均 8080 和 8081 端口中 2.准备工作 (1)准备两台 tomcat 服 ...

  10. 杂项记录 arm64 的一些特性

    函数返回值:arm64 规定了整数型返回值放在 x0 寄存器里 sp(栈空间)字节对齐:该临时变量占用 4字节空间:又因为 arm64 下对于使用 sp 作为地址基址寻址的时候,必须要 16byte- ...