在项目开发过程中有可能很多包是没有放在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. 番外篇 - Linux环境准备

     这是一个比较早的系列,最近发现一直没有更新...    asp.net core跨平台,所以我们首先需要一个linux来验证,所以第一篇就是准备我们的环境   .netcore尝试在centos6. ...

  2. WEB 应用缓存解析以及使用 Redis 实现分布式缓存

    什么是缓存? 缓存就是数据交换的缓冲区,用于临时存储数据(使用频繁的数据).当用户请求数据时,首先在缓存中寻找,如果找到了则直接返回.如果找不到,则去数据库中查找.缓存的本质就是用空间换时间,牺牲数据 ...

  3. python获取某视频网站视频

    还是老生常谈的操作 import requests import os from bs4 import BeautifulSoup from urllib.parse import urljoin h ...

  4. Oracle学习(十四)分表分区

    一.前言 大数据量的查询,不仅查询速度非常慢,而且还会导致数据库经常宕机,在尝试添加索引及查询方式修改后,还有没有更有效的解决方案呢? 分库.分表.分区这些概念咱就应该了解一下. 二.分表 假如一个大 ...

  5. java 判断jsonObject 对象为null的天坑问题

    jsonObject = {"mmbRetrieveBookingResponse":{"bookingData":null,"isAfterTran ...

  6. 什么是垃圾搜集(GC)?为什么要有GC呢?

    GC的全称是Gabage Collection,翻译过来就是"垃圾收集"的意思.那么我们为什么用GC呢? 那么我们接下来就来聊一聊GC的创造背景.在C和C++那个年代的程序员界的长 ...

  7. 智慧矿山-选矿工艺数字 3D 可视化

    前言 现代科技和工业的发展对矿物原料的要求越来越高,直接开采的原矿石往往达不到标准,而原矿通过选矿加工后则可以满足要求.选矿技术在冶金.煤炭.化工.建材和环保等部门都得到应用,对国民经济的发展意义重大 ...

  8. 获取豆瓣读书所有热门标签并保存到mongodb数据库

    目标url:https://book.douban.com/tag/?view=type&icn=index-sorttags-all 目的:抓取所有标签名称(tag_name),标签链接(t ...

  9. 003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程

    003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程 Java程序长啥样? 首先编写一个Java程序 记事本编写程序 打开记事本 1.wi ...

  10. 002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介

    002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介 学习Java的基础语法 Java是一门编程语言,学习的逻辑其实和现实世界的语言是一样的,需要了 ...