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. 用Tensorflow实现DCGAN

    1. GAN简介 最近几年,深度神经网络在图像识别.语音识别以及自然语言处理方面的应用有了爆炸式的增长,并且都达到了极高的准确率,某些方面甚至超过了人类的表现.然而人类的能力远超出图像识别和语音识别的 ...

  2. SSH无法连接到服务器

    SSH服务器会无法连接,有时候并不是密码的问题,可能由于你上次改了密码(就算改成跟上次一样也是一个效果)导致家目录下的known_hosts(/root/.ssh/known_hosts)不一样了并且 ...

  3. Mysql推荐使用规范

    一.基础规范 使用InnoDB存储引擎支持事务.行级锁.并发性能更好.CPU及内存缓存页优化使得资源利用率更高 推荐使用utf8mb4字符集无需转码,无乱码风险, 支持emoji表情以及部分不常见汉字 ...

  4. 基于redis的分布式锁(转)

    基于redis的分布式锁 1 介绍 这篇博文讲介绍如何一步步构建一个基于Redis的分布式锁.会从最原始的版本开始,然后根据问题进行调整,最后完成一个较为合理的分布式锁. 本篇文章会将分布式锁的实现分 ...

  5. 悲观并发 乐观并发 Entity Framework Core中的并发处理

    悲观并发策略 A用户发起一个请求   开启了事务 查询到了某一条数据 进行修改     在A提交事务之前 其他人都不能对这条数据进行修改 这种策略最常见的一个问题就是死锁  比如A修改X记录,B修改Y ...

  6. java.lang.ClassNotFoundException: javax.servlet.SessionCookieConfig

    使用 MockMvc 模拟进行单元测试时出现以下的错误,网上看到的资料应该是说Spring4.0需要servlet3.0的支持? 在pom.xml更改servlet的版本依赖后即可

  7. 给echart初始化的dom节点绑定时间获取点击的值渲染省市区

    this.drawMap().on('click', function (params) { var province = params.name; that.mapStatus = province ...

  8. JSR107缓存规范

    Java Caching定义了5个核心接口,分别是CachingProvider, CacheManager, Cache, Entry 和 Expiry. CachingProvider定义了创建. ...

  9. p3966单词

    后缀自动机版本: 所有的串用(char)('z'+1)连起来,然后建自动机.再用原串在自动机上跑.跑到的位置的endpos就是出现的次数.不过内存有点大. #include <iostream& ...

  10. (详细)华为V9 DUK-AL20的usb调试模式在哪里打开的方法

    当我们使用PC通过数据线链接到安卓手机的时候,如果手机没有开启USB开发者调试模式,PC则没办法成功识别我们的手机,有时我们使用的一些功能较好的软件好比以前我们使用的一个软件引号精灵,老版本就需要打开 ...