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中看到的方法

  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>要在路由中动态插入数据的话需要反斜杠和${}之前记录不记得跑哪里去了再记录一遍

posted @ 2017-08-25 15:06  me春天  阅读(267)  评论(0编辑  收藏  举报