vue项目历险记（二）

这篇文章我想来记录一下使用webpack、vue-cli、babel及其他工具的经历，毕竟这写工具实打实的提高了我的生产效率。

配置 babel-polyfill
配置 scss
使用 PostCSS
开启 Gzip 压缩
使用 url-loader 处理图片资源
vue-router 的使用

1. 配置`babel-polyfill`

安装babel-polyfill， npm i --dave-dev babel-polyfill;

修改build/webpack.base.conf.js下的配置:

在module.exports方法前加入以下函数，代码如下：

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

在module.exports方法中的entry中配置:

1
2
3

entry: {
  app: ['babel-polyfill', './src/index.js']
}

在module.exports方法中的module/rules中配置:
1
2
3
4
5
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),

...
]
1. babel-polyfill的配置方法有很多种，网上提供了至少3种方法，可以根据自身项目需求进行配置。

2. 配置`scss`

安装依赖:

1 2	npm install node-sass --save-dev npm install sass-loader --save-dev

修改webpack配置:

找到webpack.base.conf.js文件，修改如下配置:

// module/rules
[
  ...
  {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
  }
  ...
]

使用scss:
在需要使用到scss的页面加上:

1	<style lang="scss" scoped type="text/css"></style>

*亲测第二步可以省去，项目也可以使用scss跑起来，建议还是加上，更多scss相关文档scss快速入门

3. 使用PostCSS

使用vue-cli构建的项目，现在已经将postcss作为初始配置加入其中了，生成的项目根目录下找到.postcssrc.js。即为postcss的配置文件，

postcss是一个允许使用 JS 插件转换样式的工具。这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。
PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

4. 开启Gzip压缩

在项目build的时候开启Gzip，配合nginx开启Gzip，可以有效的加快资源加载速度，提高用户体验。

打开/config/index.js 配置文件，修改如下配置，将productionGzip修改为true，同时productionGzipExtensions修改为['js', 'css']，表示将js和css文件进行Gzip压缩。
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
dev: {
...
},
build: {
...,
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
...
}
}
还有关键一步，我们需要安装依赖：npm i compression-webpack-plugin --save-dev，可能会需要安装其他相关依赖，按照提示安装就行啦。
关于Gzip，其实我们还可以配置压缩比的，在/build/webpack.prod.conf.js目录下的CompressionWebpackPlugin中可以自行配置。

5. 使用url-loader处理图片资源

url-loader最常用的场景应该就是用来处理是否将图片转成base64了，因为转成base64之后，作为background的图片将会以base64码的方式写进css文件，可以有效的减少请求。

打开配置文件/build/webpack.base.conf.js

module.exports = {
  ...,
  module: {
    rules: [
      ...,
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      ...
    ]
  }
  ...
}

以上配置的意思是，将小于10KB大小的文件转成base64。具体数值可以根据实际业务需要作调整。
我在实际应用中发现了一个小问题，就是，我在某个页面中使用了一个图标背景，该文件位于根目录的/static/icons/下，于是我就在页面中直接使用background: url('/static/icons/icon_1.png');。此时运行npm run build时，会在根目录下生成一个 /dist 目录，及生产环境的项目根目录，但是此时的背景图并没有使用base64(background: url('data:image/png;base64......'))的css背景，而是直接使用原图。后来把页面css改成background: url('../../../static/icons/icon_1.png');相对路径即可。

6. vue-router的使用

把路由模块分开来，单独一个文件来管理路由：

// index.js(app.js) 我们在这里会引入项目入口文件和router
import App from './App'
import router from './router/router' // 下面的那个router.js文件

// 创建一个 router.js 文件，用于管理路由
Vue.use(VueRouter)
export default new VueRouter({
  mode: 'history', // 开启路由history模式
  routes: [
    // 动态路由模式（跟友好的加载方式），按需加载
    { path: '/index', name: 'index', component: resolve => require(['../pages/index'], resolve) },
    ...
  ]
})