Vue-CLI-2.x全家桶架构,支持打包后自动部署到服务器构建案例

栏目: JavaScript · 发布时间: 5年前

内容简介:今天有时间分享一些平时自己开发上的一些构建配置,我们以Vue-CLI-2.x来构建开发环境。 好,我们先来看一下我们要做哪些工作。现附上源码地址,1.Vue,Vuex,vue-router,axios通过CDN引入;优化打包后文件过大的问题

今天有时间分享一些平时自己开发上的一些构建配置,我们以Vue-CLI-2.x来构建开发环境。 好,我们先来看一下我们要做哪些工作。

现附上源码地址, github.com/749264345/V…

1.Vue,Vuex,vue-router,axios通过CDN引入;优化打包后文件过大的问题

2.开发环境区分开发,测试,生产;提高开发效率

3.打包区分测试与生产

4.实现项目打包后自动部署到远程服务器

5.模块化构建vuex状态管理

6.打包后自动清除console.log()

7.项目默认基于Element-ui,对相关组件二次封装

8.模块化构建axios请求响应拦截器

一寸光阴一寸金,寸金难买寸光阴~ 废话不多说,直接撸起袖子就是干~~

1.Vue,Vuex,vue-router,axios通过CDN引入

在过去我们都习惯使用npm或者cnpm安装依赖,因为这种操作非常方便,但是有利必有弊,有些小伙伴在将项目打包后会发现打包后的js文件非常庞大,有些甚至达到了几兆,所以最终导致应用打开时首屏加载非常慢,因此我们可以使用传统的引入方式,也就是CDN引入。 Vue,Vuex,vue-router,axios,这些均为静态资源,我们从它们官网下载适合的版本后放入项目根目录【static】文件夹,然后修改几个地方: 首先,index.html

<!--兼容ie-->
    <script src="./static/libs/polyfill.min.js"></script>
    <script src="./static/libs/eventsource.js"></script>
    <!--vue-->
    <script src="./static/libs/vue.js"></script>
    <script src="./static/libs/vue-router.min.js"></script>
    <script src="./static/libs/element-ui/element-ui.js"></script>
    <script src="./static/libs/axios.js"></script>
    <script src="./static/libs/vuex.js"></script>
复制代码

然后修改,build/webpack.base.conf.js

module.exports = {
    externals: {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'axios': 'axios'
    },
    ...
}
复制代码

到这里基本配置已经完成,最后一步需要在main.js中删除原先对这些模块的import操作即可。这样后再打包项目,你会发现页面非常丝滑,几乎秒开。

2.开发环境区分开发,测试,生产;提高开发效率

在调试接口,或者debug的时候我们经常会切换环境,而且在打包的时候又要改成生产的接口,这样没有效率,所以我们可以做如下配置。 在config/dev.env.js文件中,

const TARGET = process.env.npm_lifecycle_event;

//开发环境
if (TARGET === 'dev') {
    var data = {
        NODE_ENV: '"dev"',
        API: '"http://www.dev.com"'
    }
}

//测试环境
if (TARGET === 'test') {
    var data = {
        NODE_ENV: '"test"',
        API: '"http://www.test.com"'
    }
}

//生产环境
if (TARGET === 'prod') {
    var data = {
        NODE_ENV: '"prod"',
        API: '"http://www.prod.com"'
    }
}
复制代码

我们从process.env.npm_lifecycle_event中获得当前node执行的环境来区分项目运行的环境,这样我们可以用来区分接口环境,因此我们添加相关指令。 在根目录package.json文件中,

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  },
复制代码

添加三条指令,分别为dev,test,prod对应config/dev.env.js文件中添加的三个环境。 到这里我们完成了开发环境的区分。

3.打包区分测试与生产

原理和上面一致, 在config/prod.env.js文件中,

const TARGET = process.env.npm_lifecycle_event;

//测试环境
if (TARGET === 'build:test') {
    module.exports = {
        NODE_ENV: '"build:test"',
        NODE_NAME: '"测试"',
       API: '"http://www.test.com"'
    }
}

//生产环境
if (TARGET === 'build:prod') {
    module.exports = {
        NODE_ENV: '"build:prod"',
        NODE_NAME: '"生产"',
        API: '"http://www.prod.com"'
    }
}
复制代码

同时在根目录package.json文件中,

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build:test": "node build/build.js",
    "build:prod": "node build/build.js"
  },
复制代码

我们看到添加了最后2条指令,这里我么就可以直接打测试包,与生产包。 而不需要每次在项目中修改代码。

4.实现项目打包后自动部署到远程服务器

首先安装

npm install scp2 --save-dev
复制代码

然后修改项目build/build.js 添加如下代码,

var scpClient = require('scp2');
var serverConf = require('../config/prod.env');
const spinner2 = ora('正在发布到' + serverConf.NODE_NAME + '服务器...');
spinner2.start();
scpClient.scp('dist/', serverConf.server,
	function (err) {
		spinner2.stop();
		if (err) {
			console.log(chalk.red('发布失败.\n'));
			throw err;
		} else {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			var hour = date.getHours();
			var minute = date.getMinutes();
			var second = date.getSeconds();
			console.log(chalk.green(
				'Success! 成功发布到' + serverConf.NODE_NAME + '服务器! \n' +
				year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second
			));
		}
	}
);
复制代码

另外,我们添加了发布后显示当期时间的功能,方便我们查看。 我们远程服务器的配置信息放在在config/prod.env.js文件中,如下,

//测试环境
if (TARGET === 'build:test') {
    module.exports = {
        NODE_ENV: '"build:test"',
        NODE_NAME: '"测试"',
        API: '"http://192.168.1.123:8080"',
        server: {
            host: '192.168.1.123',
            port: 3122,
            username: 'root',
            password: '2019111',
            path: '/usr/local/nginx/html/test'
        }
    }
}
复制代码

到这里我们完成了,自动部署的功能,命令行输入

npm run build:test
复制代码
Vue-CLI-2.x全家桶架构,支持打包后自动部署到服务器构建案例

稍等片刻,

Vue-CLI-2.x全家桶架构,支持打包后自动部署到服务器构建案例

OK,完美~

5.模块化构建vuex状态管理

由于篇幅,以及对于vuex的配置有很多,这里不再做阐述。

6.打包后自动清除console.log()

打开build/webpack.prod.conf.js添加一个插件,

plugins:[
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_console: true,
          pure_funcs: ['console.log']
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
]
复制代码

这样,项目打包后的console.log()将不会出现在控制台,很干净。

7.项目默认基于Element-ui,对相关组件二次封装

这里我们以element-ui分页组件为例, 我们新建一个vue文件,

<template>
    <el-pagination background style="text-align:right;margin-top:10px;" popper-class="pagination"
        layout="total,  prev, pager, next,sizes, jumper"
        :total="total" 
        :page-sizes="[10, 20, 30, 40,50]"
        :page-size="size"
        :current-page="current"
        @size-change="sizeChange"
        @current-change="currentChange"></el-pagination>
</template>
<script>
export default {
    data() {
        return {
            pageSize: this.size,
            pageCurrent: this.current
        }
    },
    props: {
        total: {
            type: Number,
            default: 0
        },
        current: {
            type: Number,
            default: 1
        },
        size: {
            type: Number,
            default: 10
        }
    },
    methods: {
        currentChange(current) {
            this.pageCurrent = current;
            this.emit();
        },
        sizeChange(size) {
            this.pageSize = size;
            this.pageCurrent = 1;
            this.emit();
        },
        emit() {
            this.$emit('pageChange', {
                pageSize: this.pageSize,
                pageCurrent: this.pageCurrent
            })
        }
    }
}
</script>
复制代码

我们通过emit()方法将组件内的状态发送给父组件,父组件通过事件订阅来监听,我们来看父组件,

<script>
<template>
<!-- 分页 -->
<Pagination v-on:pageChange="pageChange" :total="total" :current="pageCurrent" :size="pageSize"></Pagination>
</template>

//引入组件
import Pagination from "../components/Pagination";

export default {
    components: {
        Pagination
    },
    data() {
        return {
            //分页数据
            total: 0,
            pageSize: 10,
            pageCurrent: 1
        };
    },
    methods: {
        //分页发生改变
        pageChange(res) {
            this.pageSize = res.pageSize;
            this.pageCurrent = res.pageCurrent;
        }
    }
};
</script>
复制代码

我们使用pageChange()来监听,这样不论是代码篇幅还是逻辑都变得更清晰。

8.模块化构建axios请求响应拦截器

我们新建一个文件,interceptors.js

// 接口请求拦截器
axios.interceptors.request.use((config) => {
		//每次请求发起前为当前接口创建,取消请求的实例
		const CancelToken = axios.CancelToken;
		const source = CancelToken.source();
		Vue.prototype.$requestCancel = function () {
			source.cancel('canceled');
		};
		config.cancelToken = source.token;
		// 接口添加头信息
		config.headers.Authorization = localStorage.getItem('token');
		return config;
	},
	(err) => {
		return Promise.reject(err);
	}
);

// 接口响应拦截器
axios.interceptors.response.use((response) => {
     if (response.data.code == 200) {
         localStorage.setItem('token', response.headers.authorization);
      } else {
          Vue.prototype.$message.error(response.data.msg);
      }
		return response;
	},
	(error) => {
		return Promise.reject(error.response.data);
	}
);

复制代码

我们通过拦截器实现token信息的统一获取和请求携带,统一提示错误信息,并且记录当前请求,并且在路由跳转时取消上一张页面的请求,提高当前页面的有效展现。

由于篇幅问题,具体其他配置请移步我的github~ 源码地址, github.com/749264345/V… 如有更优的配置方案请求在下方留言~


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java和Android开发学习指南(第二版)

Java和Android开发学习指南(第二版)

Budi Kurniawan / 李强 / 人民邮电出版社 / 2016-3 / 69.00元

本书是Java语言学习指南,特别针对使用Java进行Android应用程序开发展开了详细介绍。 全书共50章,分为两大部分。第1部分(第1章到第22章)主要介绍Java语言基础知识及其功能特性。第2部分(第23章到第50章)主要介绍如何有效地构建Android应用程序。 本书适合任何想要学习Java语言的读者阅读,特别适合想要成为Android应用程序开发人员的读者学习参考。一起来看看 《Java和Android开发学习指南(第二版)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器