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. WEB API系列(一):WEB API的适用场景、第一个实例

    在我前一篇博客中已经给各位简单介绍了HTTP协议与RestFul API的关系,以及一些基本的HTTP协议知识,在这些知识的铺垫下,今天,我们一起来讨论一下WEB API的适用场景,然后写我们第一个W ...

  2. 【python 3】 文件操作

    文件操作 一: 只读.读写 # 示例: 1 f = open("E:\人员名单.txt" , encoding="utf-8" , mode="r&q ...

  3. hadoop配置项笔记 - yarn

    hadoop版本:3.1.1 yarn-site.xml yarn.log-aggregation-enable 作用:是否开启任务日志收集 默认值:false 我的设置:true yarn.log- ...

  4. 计算Java对象内存大小

    摘要 本文以如何计算Java对象占用内存大小为切入点,在讨论计算Java对象占用堆内存大小的方法的基础上,详细讨论了Java对象头格式并结合JDK源码对对象头中的协议字段做了介绍,涉及内存模型.锁原理 ...

  5. PCA和PCoA

    讲解很详细:http://blog.genesino.com/2016/10/PCA/ PCA分析一般流程: 中心化(centering, 均值中心化,或者中位数中心化),定标(scale,如果数据没 ...

  6. pgsql 服务遇见的问题记录

    1.安装服务 命令 pg_ctl.exe register -N "pgsql" -D ../data 2.安装后启动失败的解决方式 2.1删除data文件夹下的postmaste ...

  7. Matlab 奇异值、奇异矩阵、svd函数

    奇异值: 奇异值分解法是线性代数中一种重要的矩阵分解法,在信号处理.统计学等领域有重要应用. 定义:设A为m*n阶矩阵,A'表示A的转置矩阵,A'*A的n个特征值的非负平方根叫作A的奇异值.记为σi( ...

  8. PDOMySQL实现类, 自动重置无效连接

    PHP连接MySQL时, 有可能因为MySQL的原因,而使得php里生成的连接无效.比如超过8小时, MySQL自动断开空闲连接的问题,虽然可以调高这个时间,但显然这不是比较文艺的实现方式.现在洒家用 ...

  9. 【IDEA填坑】springboot整合ssm框架

    遇到俩问题:一个是mybatis生疏  在EmpMapper.xml中定义resultMap <resultMap id="EmpWithDept" type="c ...

  10. python 变量之小整数池跟大整数池

    在python中定义变量会有:id,type,value.对于==比较的是value,对于is比较的是id. 因此,对于相同value的变量,它的type相同,但是它的id值可能不一样.对于相同id的 ...