1、我在打包完成后,打开index.html文件发现地址并没有携带路由。

    config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’。意思是根目录,这时会从index.html所在的硬盘的根目录下开始查找,自然无法找到。

    解决办法: 改为  ‘./ ’这时就不再是绝对路径的根目录了,而是改为了相对路径,同目录下进行查找。再次打包,页面基本正常。

    

  

  2、vue打包后CSS中引用的背景图片不显示问题 

     静态资源的引用有两种路径:

      绝对路径:从盘符开始的路径,如:C:\windows\system32\cmd.exe

      相对路径:从当前路径开始的路径

    静态资源都在static上面 ,如 app.css访问static/img/’图片名’是访问错误的,因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片('../../static/img/’图片名');

    解决的方法:打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可。   

    

 

vue 构建项目vue-cli

vue 构建项目 文件引入

vue 构建项目遇到的请求本地json问题

vue 构建项目遇到的问题的更多相关文章

  1. vue 构建项目vue-cli

    1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...

  2. vue 构建项目遇到的请求本地json问题

    在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置  根目录/static下.如项目名/static/data.json,这边 ...

  3. vue 构建项目 文件引入

    1.vue引用依赖文件.  举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...

  4. 关于vue构建项目的一些指令

    第一步: brew install nodejs(MAC机子下)  Windows直接官网下载对应版本node.js 第二步: 获取nodejs模块安装目录访问权限(Windows系统忽略)sudo ...

  5. Vue构建项目

    构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用we ...

  6. 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details

    今天构建vue项目执行npm install初始化后报错 run `npm audit fix` to fix them, or `npm audit` for details 出现这问题控制台会有一 ...

  7. vue构建项目全过程

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

  8. Webpack+Vue构建项目

    第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...

  9. vue构建项目步骤

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

随机推荐

  1. spring boot整合 springmvc+mybatis

    需要以下依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId&g ...

  2. [原创]K8 cping 3.0大型内网渗透扫描工具

    [原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...

  3. [原创]K8Cscan插件之端口扫描C#源码

    [原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...

  4. angular整合环信webIM

    此处有两大坑: 1.下载easemob-websdk此npm包时,并没有下载strophe.js.crypto-js.underscore这三个包,需要自己手动下载. 2.如下方标红位置所示,需要自己 ...

  5. Ocelot简易教程(二)之快速开始2

    为什么这篇的标题叫"Ocelot简易教程(二)之快速开始2"呢,因为很多朋友跟我说上一篇" Ocelot简易教程(二)之快速开始1"内容太少了,只是简单介绍Oc ...

  6. HP C7000刀片服务器开关机过程

    HP C7000开关机过程   一.HP C7000关机过程 1.关闭台刀片服务器. 2.确认刀片已关机后,登录https://xxx.xxx.xxx.x/,Administrator/2PF2QT, ...

  7. mysql 开发基础系列11 存储引擎memory和merge介绍

    一. memory存储引擎 memoery存储引擎是在内存中来创建表,每个memory表只实际对应一个磁盘文件格式是.frm.   该引擎的表访问非常得快,因为数据是放在内存中,且默认是hash索引, ...

  8. RabbitMQ系列目录

    1.RabbitMQ安装和配置 (高可用集群和延迟队列) 2.AMQP协议介绍 3.RabbitMQ客户端使用(EasyNetQ)

  9. Perl中的自增、自减

    自增和自减 perl也支持数值类型的自增和自减操作.不仅如此,还支持字符.字符串的自增.自减. 如果自增(++)和自减(--)符号放在数值的前面,则先增减,再返回: 如果自增(++)和自减(--)符号 ...

  10. 数据可视化 seaborn绘图(1)

    seaborn是基于matplotlib的数据可视化库.提供更高层的抽象接口.绘图效果也更好. 用seaborn探索数据分布 绘制单变量分布 绘制二变量分布 成对的数据关系可视化 绘制单变量分布 se ...