默认情况下通过webpack+vuec-li打包的css、js等资源，路径都是绝对的，即static在根目录下，假如部署到带有文件夹目录的项目中，资源路径就会出错，如何解决。

1.修改资源引用相对路径，打开build/webpack.prod.conf.js

找到27行  output:增加publicPath:'./',如图：

当然在config文件夹下的index.js中修改 

assetsPublicPath:'./'

同样也可以达到资源的相对引用。

2.修改css资源引用的相对路径，打开build/utils.js，找到以下位置

增加 publicPath: '../../' 即可

打包后即可以放到任何目录下了。

[Vuejs] webpack+vue-cli打包如何引用相对路径的更多相关文章

  1. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  2. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  3. 解决webpack vue 项目打包生成的文件，资源文件均404问题

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改c ...

  4. 手把手教你如何安装使用webpack vue cli

    1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...

  5. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  6. vue项目打包后的资源路径问题

    最近做的vue项目,本地测试完成后,build上线,却发现了文件路径问题,提示各种诸如js,css等资源找不到的错: 正确解决方式有两种,一种是绝对路径配置,详细可以网上查,个人推荐第二种相对路径,这 ...

  7. vue打包空白及字体路径错误问题

    vue项目打包后空白 在config/index.js文件中 assetsPublicPath: '/', 改为 assetsPublicPath: './', build: { // Templat ...

  8. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  9. Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

    0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...

随机推荐

  1. SpringMVC作用域传值几种方式

    一.SpringMVC 作用域传值的几种方式 1  使用原生Servlet 1.1 在 HandlerMethod 参数中添加作用域对象 1.1.1 ServletContext不能在方法参数中获取, ...

  2. 62.Xcode 添加代码块

    1. Xcode创建一个新项目,打开一个.h或者.m文件 2.我举例以设置属性为例 #import <UIKit/UIKit.h> @interface ViewController : ...

  3. js保存,获取,删除cookie的操作

    [转]来自:http://blog.csdn.net/itmyhome1990/article/details/7363816 JSP表单页面 <form action="login& ...

  4. Javascript php 异常捕获

    JavaScript try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块. JavaScript 语句 try 和 cat ...

  5. C++STL 算法

    算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. <algorithm>是所有STL头文件中最大的一个,其 ...

  6. c# 数据表DataTable给devexpress的gridControl提供数据源

    C# DataTable 详解 参考:https://www.cnblogs.com/Sandon/p/5175829.html http://blog.csdn.net/singgel/articl ...

  7. IntelliJ IDEA使用心得之Maven项目篇

    今天和大家分享下,在IDEA中打开Maven项目的方法. 对于新版的IDEA可以直接打开Maven项目,但是对于旧版的IDEA需要使用Maven命令生成项目的IDEA配置文件. 在项目的根目录(即po ...

  8. 多表更新时碰到的 ERROR 1292 (22007)隐式转换错误

    表结构如下: Create Table: CREATE TABLE `test_t2` ( `id` int(11) NOT NULL AUTO_INCREMENT, `customer_no` va ...

  9. python list 和 tuple, dict 用于迭代代价

    #!/usr/bin/env python #-*- coding:utf-8 -*- import time start = time.time() for i in range(1000000): ...

  10. c++ cout、<< 、cin、>> 、endl 详解

    std::cout是在#include<iostream>库中的ostream类型中的对象 std::表示命名空间,标准库定义的所有名字都在命名空间std中 std::cout是在#inc ...