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. 【Git】Git使用记录: 基于git ignore文件将remote上的文件untrack

    话不多说直接上步骤: git bash直接干到你的code. 直接敲命令: git rm -r --cached . rm是remove 命令 -r将允许递归删除 -cached只会从索引中删除文件. ...

  2. 好玩图像pil处理

    pil库的学习总结 #__author:'lwq'#date: 2018/11/15 from PIL import Image,ImageFilter,ImageDraw,ImageFont ### ...

  3. IPTABLES使用总结(内网模拟银行网络)

    iptables中有以下三种类型的表: FILTER表,默认的表,包含以下三种内建链: INPUT链,发给本地sockets的包 FORWARD链,经由系统发送的包 OUTPUT链,本地生成并发出的包 ...

  4. spring+springmvc+hibernate 整合

    三大框架反反复复搭了很多次,虽然每次都能搭起来,但是效率不高.最近重新搭了一次,理顺了思路,整理了需要注意的地方,分享出来. 工具:Eclipse(jdk 1.7) spring和hibernate版 ...

  5. springboot缓存注解——@Cacheable和@CacheConfig

    @Caching :制定多个缓存规则 @Cacheable 和 @CachePut 同时标注时 ,@CachePut导致还是会走方法跟数据库交互 //根据lastName查,并将结果缓存,并且可以用于 ...

  6. Creed_颓知乎

    题目背景 二轮省选前的一个最后周,Creed_还在颓知乎. 突然,她看到一个有趣的回答. 紧接着,Creed_点开了评论区,又看到了一个有趣的评论. Creed_想了一下,发现自己并不会,于是她又顺着 ...

  7. discuss!X3.4 帖子显示昵称而不是用户名的解决办法

    问题:dedecmsV5.7和discuz!X3.4整合之后,实现免激活登陆之后,从dede过来的用户在discuz 直接展示的用户名,因为我们的用户名是手机号,所以不想帖子都展示的是用户名. 因为我 ...

  8. ajax入门学习

    1.   XMLHttpRequest 是 AJAX 的基础. 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpReq ...

  9. 从零开始学Python 一

    一.安装 1.进入Python官网下载环境:https://www.python.org 2.根据自己的电脑选择安装版本,然后安装即可. 二.运行第一个程序 1.安装完Python,会自带一个编辑器, ...

  10. 【lintcode】 二分法总结 I

     二分法:通过O(1)的时间,把规模为n的问题变为n/2.T(n) = T(n/2) + O(1) = O(logn). 基本操作:把长度为n的数组,分成前区间和后区间.设置start和end下标.i ...