访https://github.com/bailicangdu/vue2-elm的PC商城

在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头。

添加 mode: 'history' 之后将使用 HTML5 history 模式,该模式下没有 # 前缀,而且可以使用 pushState 和 replaceState 来管理记录。

给路由设置mode: 'history',后build后的文件就算改了‘/’为‘./’也无法当前运行静态文件预览

用vue-cli搭建的一个项目

Vue-cli 构建项目 的`.vue`组件中, css中添加背景图路径问题

  • 需要引入的资源只有三种, JS, CSS 和图片. 图片分为 <img src=""> 中引入的图片, 和 background-image: url() 中引入的图片.
  • img中的图片是完全正确的, 这时候, 我们css中的图片怎么都找不到.
  • 问题最尴尬的是: npm run dev的时候一切正常
  • dev
  • build 

在gihub的issue中看到的方法

  1. 针对此问题, 需要单独为css配置publicPath.
  2. ExtractTextWebpackPlugin 提供了一个options.publicPath的API, 可以为css单独配置publicPath.
  3. 对于 vue-cli生成的项目, dist目录结构为: dist > index.html + static > css + img + js
  4. 问题是css中的background路径不能正确引入.
  5. 更改build/utils.js文件中的 ExtractTextPlugin 的 options配置.

    if (options.extract) {
    return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../', //注意: 此处根据路径, 自动更改
    fallback: 'vue-style-loader'
    })
    } else {
    return ['vue-style-loader'].concat(loaders)
    }
    }
  6. 附上extract-text-webpack-plugin 的文档

<nuxt-link :to="`/${item.id}`">{{item.url}}</nuxt-link>要在路由中动态插入数据的话需要反斜杠和${}之前记录不记得跑哪里去了再记录一遍

vue.js2.0实战填坑记录的更多相关文章

  1. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  2. webapp填坑记录[更新中]

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  3. webapp填坑记录

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  4. 《vue.js2.0从入门到放弃》学习之路

    原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...

  5. UiAutomator2.0升级填坑记

    UiAutomator2.0升级填坑记 SkySeraph May. 28th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sk ...

  6. vue.js2.0+elementui ——> 后台管理系统

    前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...

  7. 浅谈Vue.js2.0某些概念

    Vue.js2.0是一套构建用户界面的渐进式框架,目标是实现数据驱动和组件系统.   A 渐进式框架 Vue.js是一个提供MVVM数据双向绑定的库,只专注于UI层面,这是它的核心.它本身没有解决SP ...

  8. vue.js2.0 (简易)水果商城 vuex vant-ui

    vue.js2.0 (简易)水果商城 vuex vant-ui:https://segmentfault.com/a/1190000015690250 vue2.5全家桶 高仿vivo商城 百分之95 ...

  9. 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!

    这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...

随机推荐

  1. 简单快捷地测试 JPush API

    随着 JPush API v3版本的推出,加上之前开放的 Report API,JPush API 逐渐切换为比较好的符合 REST API 的规范,从而也很容易地使用一般的 HTTP/REST 工具 ...

  2. Opencv— — Bias and Gain

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  3. Mybatis一二级缓存的理解

        频繁的数据库操作是非常耗费性能的(主要是因为对于DB而言,数据是持久化在磁盘中的,因此查询操作需要通过IO,IO操作速度相比内存操作速度慢了好几个量级),尤其是对于一些相同的查询语句,完全可以 ...

  4. Servlet读取配置文件的三种方式

    一.利用ServletContext.getRealPath()[或getResourceAsStream()] 特点:读取应用中的任何文件.只能在web环境下. private void text3 ...

  5. Java应用架构设计模块化模式与OSGI摘录

    在Java中,最适合模块化的单元就是Jar文件. 代码层面我们关注的太多了,熟练的开发人员现在很少争论使用模式的好处,也不再识别哪个模式适合当前需要,因为都能够本能地使用各种设计原则和模式,从GoF的 ...

  6. bzoj2718

    二分图匹配 首先有个定理:最长反链=最小链覆盖 最小链覆盖可以重复经过点 所以我们不能直接建图 那么我们用floyd判断是否相连 然后建图就行了 #include<bits/stdc++.h&g ...

  7. 3.javascript转换日期字符串为Date对象

    js中文网 阮一峰 1.求format“xxxx年xx月xx日 xx:xx”类型的两个日期天数差 var start = "2017年09月17日 13:51"; var end ...

  8. java:calendar类及一些比较实用的utils(二)

    在这里将我在项目中用到的一些关于使用Calendar的utils分享出来,只是一部分,后期遇到好的通用方法会继续添加,以和大家交流学习,如果你还不熟悉这个类的使用,但是急需某个util,可以加群:41 ...

  9. java 随机颜色

    用HSV模型来实现颜色的随机,然后转为RGB模型 色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色.黄色等. 饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0-100%的数值. ...

  10. ASP.NET中的几种弹出框提示基本方法

    NET程序的开发过程中,常常需要和用户进行信息交互,对话框的出现将解决了这些问题,下面是本人对常用对话框使用的小结,希望对大家有所帮助 我们在.NET程序的开发过程中,常常需要和用户进行信息交互,比如 ...