Vuejs技术栈从CLI到打包上线实战全解析 - 万里秋山(2)_H5之家

这次实践中未采用这种做法，而是创建了一个getData.js进行了统一管理：

import axios from 'axios' const getSomething = (param1，param2) => axios.get(url，{ params: { param1: param1, param2: param2 } }) export { getSomething }

在单文件组件中import getSomething方法再进行调用即可。

引入iconfont

直接在main.js中import你下载的iconfont.css即可

js中判断环境

常见的需求是开发环境须console，而线上环境不可以console。默认环境有'development'、'production'、'testing'三种。

if (process.env.NODE_ENV !== 'production') { console.log(data) } 设置数据模拟请求Mock

数据模拟请求利用了mock.js,配置文档，不过这个只是简单的数据模拟，没有生成文档的功，更全面的文档、Mock.js、可视化、Rest、接口过渡、文档修改提醒、支持本地部署等功能可以使用阿里RAP。

npm install mockjs安装后，可在/src/api目录下新建data.js，引入mockjs，后可在程序入口或api入口根据开发环境来引入data.js，下面是几个示例：

import Mock from 'mockjs' let data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }) // mock一个数据 console.log(JSON.stringify(data, null, 4)) import Mock from 'mockjs' Mock.setup({ timeout: '300‐500' }) Mock.mock(/\/login/, { code: 0 }) // 拦截login请求，返回对象{ code: 0 } import Mock from 'mockjs' Mock.setup({ timeout: '300‐500' }) Mock.mock(sitemap.cms.banners, { results: [] }) // 拦截sitemap中cms.banners请求，返回对象{ results: [] } seo

可以使用服务端渲染或者预渲染，预渲染webpack插件github地址。

Webpack

实际项目中还是不可避免地要修改webpack配置，如果不知道怎么改的话就去查看webpack的配置分析去进行修改。

配置全局变量

要设置全局变量可以在build中的webpack.base.conf.js中配置externals，与module同级：

externals: { sitemap: 'sitemap' }

然后在eslinttrc.js的module.exports添加这样一个配置：

globals: { 'sitemap': false } 根据环境的不同加载不同的js

在这个项目中要根据环境（开发环境、测试环境、生产环境）的不同加载不同的sitemap.js，这个sitemap.js会暴露出一个全局的sitemap变量，sitemap变量是个由api地址构成的json对象。利用HtmlWebpackPlugin插件的option选项来实现。

在index.html中这样写：

然后在build中的各自conf.js的HtmlWebpackPlugin设置不同的src，如在开发环境中添加src那一行：

new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', src: '//dev.example.com/api/sitemap.js', inject: true }) 配置alias（别名）

在webpack.base.conf.js，vue-cli已经默认配置好了src目录的别名为@，建议配置src下一级目录的别名，这样能减少重复书写也更美观，如下添加src、pages、components别名：

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'src': resolve('src'), 'pages': path.resolve(__dirname, '../src/pages'), 'components': path.resolve(__dirname, '../src/components') } } 图片压缩

可以使用webpack插件image-webpack-loader来压缩处理图片。

多页面

实际就是添加多个入口js然后再修改相应配置，网上资料很多，一搜就知道了。

eslint

我们有时候需要关闭某些代码检查，具体配置参见Configuring ESLint - ESLint中文，下面是常见的两个：

1）关闭eslint

/* eslint-disable */ alert('foo') /* eslint-enable */

2）关闭禁止new

/* eslint-disable no-new */ 优化和其他优化

1）由于vue的追踪对象变化原理基于使用Object.defineProperty，在处理大量数据并且不需要追踪对象变化时，可通过Object.freeze(data)冻结对象达到优化数据渲染处理

2）vue-router路由懒加载。当打包构建应用时，javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

其他

1）使用表驱动法来注册全局filter、指令等，如在src下新建filters目录，index.js中import所有全局过滤器:

import milliFormat from './milliFormat' import reverse from './reverse' export default { milliFormat, reverse }

然后在main.js中注册

import commonFiltes from './filters/index' Object.keys(commonFiltes).forEach(key => Vue.filter(key, commonFiltes[key]))

2）对于一些强耦合的组件如collapse和collapse-item，可以使用$parent和$children来进行通信，没必要像elementUI一样自己实现组件的broadcast和dispatch，我还发现有UI库竟然是使用bus来通信的，这样导致同一个页面要是有两个collapse，就会互相影响。

3）在根组件上注册公共过滤器后，除了在“Mustache”语法中使用，还可在组件中通过this.$root.$options.filters.datetime(data)获取datetime过滤器。

打包上线优化分析

npm run build --report进行打包大小分析，可视化地看到有什么地方需要优化。

测试build后的文件

build成功后有个tip提示你build后的文件需要部署在http服务器上，不能通过file协议打开。

我们可以通过node-static来启动服务。可以写一个js配置文件通过node来启动，或者CLI中输入static dist(先安装node-static)：

$ static dist serving "dist" at :8080

更多如设置端口等请点击上面的链接查看文档。

后语

本文最重要的是文章中给出的一些链接，尤其是开发前须知章节中的链接，最好点进去通读一下。

posted @