vue.js2.0实战填坑记录
访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中看到的方法
- 针对此问题, 需要单独为css配置publicPath.
- ExtractTextWebpackPlugin 提供了一个
options.publicPath
的API, 可以为css单独配置publicPath. - 对于 vue-cli生成的项目, dist目录结构为: dist > index.html + static > css + img + js
- 问题是css中的background路径不能正确引入.
更改
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)
}
}
<nuxt-link :to="`/${item.id}`">{{item.url}}</nuxt-link>要在路由中动态插入数据的话需要反斜杠和${}之前记录不记得跑哪里去了再记录一遍
vue.js2.0实战填坑记录的更多相关文章
- vue.js2.0实战(1):搭建开发环境及构建项目
Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...
- webapp填坑记录[更新中]
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
- webapp填坑记录
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
- 《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...
- UiAutomator2.0升级填坑记
UiAutomator2.0升级填坑记 SkySeraph May. 28th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sk ...
- vue.js2.0+elementui ——> 后台管理系统
前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...
- 浅谈Vue.js2.0某些概念
Vue.js2.0是一套构建用户界面的渐进式框架,目标是实现数据驱动和组件系统. A 渐进式框架 Vue.js是一个提供MVVM数据双向绑定的库,只专注于UI层面,这是它的核心.它本身没有解决SP ...
- vue.js2.0 (简易)水果商城 vuex vant-ui
vue.js2.0 (简易)水果商城 vuex vant-ui:https://segmentfault.com/a/1190000015690250 vue2.5全家桶 高仿vivo商城 百分之95 ...
- 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!
这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...
随机推荐
- 编译Thrift
按照 https://syslint.com/blog/tutorial/how-to-install-apache-thrift-on-ubuntu-14-04/ 进行, 编译时出现错误 make[ ...
- 004-画图神器-graphviz
1 安装及基本使用 1) 下载安装 下载地址 可以下载安装版进行安装或者解压版直接使用 2) 添加系统path 为了能够在dos中使用命令, 需要添加环境变量 默认安装路径为 C:\Program F ...
- BZOJ_4026_dC Loves Number Theory _主席树+欧拉函数
BZOJ_4026_dC Loves Number Theory _主席树+欧拉函数 Description dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯 竭 ...
- ubuntu bcompare 安装
Terminal Install wget http://www.scootersoftware.com/bcompare-4.2.8.23479_amd64.deb sudo apt-get upd ...
- JUC包中的锁框架
JUC包中的锁,包括:Lock接口,ReadWriteLock接口,LockSupport阻塞原语,Condition条件,AbstractOwnableSynchronizer/AbstractQu ...
- 实用的MVVM:ImageView
最近在学习WPF,遇到一本入门好书,推荐给大家<Windows Presentation Foundation 4.5 Cookbook> 做项目首先要从MVVM开始,现在把他的Simpl ...
- vue-touchjs
支持vue2.0的面向指令的touch指令,基于touchjs(原百度实现的移动端手势库) vue-touchjs支持三种stopPropagation的方式: 1 .stop修饰符 2 事件han ...
- Android开发--AndroidManifest.xml文件解析
参考文章:http://www.cnblogs.com/pilang/archive/2011/04/20/2022932.html 一.关于AndroidManifest.xml AndroidMa ...
- jquery中innerheight outerHeight()与height()的区别
1. .height() 获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值(带一个参数). 注意:1).css('height')和.height()之间的区别是后者返回 ...
- javascript runat server
<script runat="server"> protected void SubmitBtn_Click(object sender, EventArgs e) { ...