vue项目的打包

更改config文件夹下的index.js里的assetsPublicPath路径    将 “/”  改为  “./”

 build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}

1:原本路径是指向根目录,什么是根目录?

根目录:在计算机的文件系统中,根目录逻辑驱动器的最上一级目录,它是相对子目录来说的;它如同一棵大树的“根”一般,所有的树杈以它为起点,故被命名为根目录。以微软公司开发的Windows操作系统为例:打开我的计算机(计算机),双击C盘就进入C盘的根目录。双击D盘就进入D盘的根目录

  • ../ 父级目录

  • ./当前目录

2:css背景图片打包找不到的问题?

打包后,不管原先的图片资源在哪里,路径通通变成static/img/xxxx ,若在HTML里的IMG标签的src引入图片,则正常显示,因为路径是从 index.html 开始寻找的,所以static/img/xxxx是能正确访问到图片。

但是在css/app.css里,在当前的CSS目录下,无 static/img 路径,所以资源找不到。而背景图片要回退两级才能正确访问到.

index.html 
      static 
      | --img 
          | --图片.jpg
      | --css 
          | --app.css 
      | --js

| --app.js

解决方法:build->utils.js

Vue项目的打包的更多相关文章

  1. vue项目 构建 打包 发布 三部曲

    一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博 ...

  2. vue项目如何打包扔向服务器

    vue项目如何打包扔向服务器   当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放 ...

  3. vue项目webpack打包后有的文件big 问题

    vue项目打包的时候,有的big, 超过1M,   需要进行优化,方法有: 1.  非首屏图片,可以采用懒加载的方式,  如:图片的懒加载,  vue中路由的懒加载 等 2. 各个模块, 采用如sea ...

  4. vue项目如何打包前后端不分离发布手把手教学apache、nginx

    vue项目如何不分离发布 1.首先yarn build 我用了vue-cli脚手架,bulid后的dist文件夹里的index.html有加版本号,那么为什么需要加版本号呢? a.回滚 b.解决浏览器 ...

  5. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  6. Springboot项目与vue项目整合打包

    我的环境 * JDK 1.8 * maven 3.6.0 * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定 ...

  7. vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  8. Vue项目如何打包问题总结

    当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 先来描述一 ...

  9. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

随机推荐

  1. Python装饰器的另类用法

    之前有比较系统介绍过Python的装饰器(请查阅<详解Python装饰器>),本文算是一个补充.今天我们一起探讨一下装饰器的另类用法. 语法回顾 开始之前我们再将Python装饰器的语法回 ...

  2. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  3. dubbo框架初步学习

    dubbo简介 Dubbo是一个分布式服务框架,以及SOA治理方案.其功能主要包括:高性能NIO通讯及多协议集成,服务动态寻址与路由,软负载均衡与容错,依赖分析与降级等. 官网:http://dubb ...

  4. jieba库及词频统计

    import jieba txt = open("C:\\Users\\Administrator\\Desktop\\流浪地球.txt", "r", enco ...

  5. Fiddler抓取https请求 & Fiddler抓包工具常用功能详解

    Fiddler抓取https请求 & Fiddler抓包工具常用功能详解   先来看一个小故事: 小T在测试APP时,打开某个页面展示异常,于是就跑到客户端开发小A那里说:“你这个页面做的有问 ...

  6. svn 的权限配置

    #分配用户所属组 g_admin=admin g_ui=zhangsan,lisi g_code=wangwu g_test=zhaoliu,qianqi #分配目录权限 #表示项目根目录 [/] @ ...

  7. mysql5.7.25安装

    附:mysql安装包 链接:https://pan.baidu.com/s/1vROdBSw0GiMWCRpuwmqFCg 提取码:ug4o a.运行mysql-installer-community ...

  8. 【期望dp】绵羊跳弹簧

    [期望dp] 绵羊跳弹簧 >>>>题目 [题目] T 组数据.对于每一组数据,有n+1 个格子从0 到n 标号,绵羊从0 号结点开始,每次若在 x 位置掷骰子,令掷出的数为nu ...

  9. JavaJDK8新特性相关知识整理

    1.新增接口默认方法和接口静态方法     接口默认方法用default关键字修饰,与抽象方法不同之处在于抽象方法必须要求实现,而默认方法没有这个要求,默认方法本身已经有具体的实现,所有的接口实现类将 ...

  10. mvc5之文件上传

    在写这篇博客之前,被网上的博客坑了一个遍. 浪费了很多的时间 最后还是靠一位兄弟解决的问题,不得不说,虽然网上资源多.但是大多数都是水货.如果那些人可以解决你的问题,那我这里明显就没用了,除非你和我一 ...