在项目开发过程中有可能很多包是没有放在npm上的,许多包需要下载到本地引用,这样一来我们只能通过require的方式来引用文件,但是路径的名字就会很长

例如

import Select from '../../bower_commonents/bootstrap-select/dist/js/select'

这种引用方式违背了CommonJS的编程规范,这些长路径我们可以通过webpack的resolve 配置项来解决。

在weboack.base.config.js中加入以下别名的定义:

module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'bs-select': 'bower_components/bootstrap-select/dist/js/selsect.js'
}
}
}

有了上面的这个定义之后,我们就可以把之前的引用改为

import Select from 'bs-select'

vue 用别名取代路径引用的更多相关文章

  1. vue+webpack静态资源路径引用

    处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.v ...

  2. vue.js 发布后路径引用问题

    在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的 但是一旦放在了非根目录的其他文件夹里面,这时候index.html里引用的js和css文件路径都会找不到 错误如下 打开in ...

  3. vue项目sql图片动态路径引用问题

    最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...

  4. 【vue-cli 3.0】 vue.config.js配置 - 路径别名

    如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...

  5. vue打包静态资源路径不正确的解决办法

    vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...

  6. 用绝对路径引用JS、CSS

    项目中,最好使用绝对路径引用JS和CSS文件,详情如下: 1.vm文件中: <link rel="stylesheet" href="$!{request.cont ...

  7. JavaScript与CSS相对路径引用的差异

    转自:http://blog.csdn.net/luohuidong01/article/details/74938652 JS跟CSS相对路径引用的差异在于他们的参考点不一样,下面举个例子说明一下. ...

  8. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

  9. Java引用外部字体(路径引用)的一些坑

    一 原因 后端负责字体...哎,我们公司的前端真的任性啊... 然后,一路踩了jvm关于字体的坑,重点是,java的报错很随意,甚至不报错,建议直接看最后面. 二 代码 正常要windows装一次字体 ...

随机推荐

  1. 谈谈 Java 中的那些“琐”事

    一.公平锁&非公平锁 是什么 公平锁:线程按照申请锁的顺序来获取锁:在并发环境中,每个线程都会被加到等待队列中,按照 FIFO 的顺序获取锁. 非公平锁:线程不按照申请锁的顺序来获取锁:一上来 ...

  2. 【转】Locust性能-零基础入门系列(1)-wait_time属性用法

    本篇文章,从局部出发,利用一个简单的测试,来说明场景模拟的wait_time属性的用法.wait_time为什么要单独拎出来讲,是因为它主要有两种模式,而初学者对这两种模式,容易混淆.1) wait_ ...

  3. 【JAVA】JAVA相关知识点收集

    下面这些链接都是我这段时间(7月-9月)看过的.感觉自己现在处于一个疯狂吸收知识的阶段,如果是文字的方式一点一点搬运到自己的博客既重复又费时间,只有等自己积累到一定程度后才能进行原创性高质量的产出吧. ...

  4. Java基于POI实现excel任意多级联动下拉列表——支持从数据库查询出多级数据后直接生成【附源码】

     Excel相关知识点 (1)名称管理器--Name Manager [CoderBaby]首先需要创建多个名称(包含key及value),作为下拉列表的数据源,后续通过名称引用.可通过菜单:&quo ...

  5. PyCharm-缩进 格式化代码

    格式化代码 Ctrl + Alt + l 缩进代码 Tab    向右缩进4格 Shift + Tab 向左缩进4格

  6. Python-如何在一个for循环中迭代多个可迭代对象?

    案例: 某班学生期末考试成绩,语文.数学.英语分别存储在3个列表中,同时迭代三个列表.,计算每个学生的总分(并行) 某年级有4个班,某次英语成绩分别记录在4个列表中,依次迭代每个列表,统计全年级高于9 ...

  7. selenium3介绍

    1.  简介 Selenium是用于测试 Web应用程序用户界面 (UI)的常用框架.它是一款用于运行端到端功能测试的超强工具.您可以使用多个编程语言编写测试,并且 Selenium能够在一个或多个浏 ...

  8. 006 01 Android 零基础入门 01 Java基础语法 01 Java初识 06 使用Eclipse开发Java程序

    006 01 Android 零基础入门 01 Java基础语法 01 Java初识 06 使用Eclipse开发Java程序 Eclipse下创建程序 创建程序分为以下几个步骤: 1.首先是创建一个 ...

  9. Python3基础——序列类型

    开头写给自己,To Myself: 很久以来,都想要学习一门编程语言,从去年选择了python开始,反反复复重新开始了N多遍,每一次不会超过俩星期.昨天无意间翻开自己去年记的学习笔记,不禁感叹想当年我 ...

  10. nessus 家庭版安装教程(windows)

    1.根据系统选择安装包:https://www.tenable.com/products/nessus/select-your-operating-system 2.申请激活码,在我们安装的时候差不多 ...