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