生产环境部署

开启生产环境模式

开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。

不使用构建工具

如果用 Vue 完整独立版本，即直接用 <script> 元素引入 Vue 而不提前进行构建，请记得在生产环境下使用压缩后的版本 (vue.min.js)。两种版本都可以在安装指导中找到。

使用构建工具

当使用 webpack 或 Browserify 类似的构建工具时，Vue 源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式，默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量，以启用 Vue 的生产环境模式，同时在构建过程中警告语句也会被压缩工具去除。这些所有 vue-cli 模板中都预先配置好了，但了解一下怎样配置会更好。

webpack

在 webpack 4+ 中，你可以使用 mode 选项：

module.exports = {mode: 'production'
}

但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin：

var webpack = require('webpack')module.exports = {// ...plugins: [// ...new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')})]
}

Browserify

在运行打包命令时将 NODE_ENV 设置为 "production"。这等于告诉 vueify 避免引入热重载和开发相关的代码。
对打包后的文件进行一次全局的 envify 转换。这使得压缩工具能清除掉 Vue 源码中所有用环境变量条件包裹起来的警告语句。例如：

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

或者在 Gulp 中使用 envify：

// 使用 envify 的自定义模块来定制环境变量
var envify = require('envify/custom')browserify(browserifyOptions).transform(vueify).transform(// 必填项，以处理 node_modules 里的文件{ global: true },envify({ NODE_ENV: 'production' })).bundle()

或者配合 Grunt 和 grunt-browserify 使用 envify：

// 使用 envify 自定义模块指定环境变量
var envify = require('envify/custom')browserify: {dist: {options: {// 该函数用来调整 grunt-browserify 的默认指令configure: b => b.transform('vueify').transform(// 用来处理 `node_modules` 文件{ global: true },envify({ NODE_ENV: 'production' })).bundle()}}
}

Rollup

使用 rollup-plugin-replace：

const replace = require('rollup-plugin-replace')
rollup({// ...plugins: [replace({'process.env.NODE_ENV': JSON.stringify( 'production' )})]
}).then(...)

模板预编译

当使用 DOM 内模板或 JavaScript 内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。

预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

如果你使用 webpack，并且喜欢分离 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。

提取组件的 CSS

当使用单文件组件时，组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，如果你使用服务端渲染，这会导致一段“无样式内容闪烁 (fouc)”。将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。

查阅这个构建工具各自的文档来了解更多：

webpack + vue-loader (vue-cli 的 webpack 模板已经预先配置好)
Browserify + vueify
Rollup + rollup-plugin-vue

跟踪运行时错误

如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentry，它为 Vue 提供了官方集成。

from: https://cn.vuejs.org/v2/guide/deployment.html

Vue.js 生产环境部署相关推荐

320、Vue学习笔记26 -【生产环境部署】 2020.04.20
0.目录 1.开启生产环境模式 1.1 不使用构建工具 1.2 使用构建工具 2.模板预编译 3.提取组件的 CSS 4.跟踪运行时错误 5.参考链接 1.开启生产环境模式开发环境下,Vue 会提供 ...
多个vue项目生产环境下NGINX配置文件
多个vue项目生产环境下NGINX配置文件使用场景 1.多个前端项目 2.多个后端项目 3.修改nginx配置后端接口转发路径 4.反向代理某个目录下带特定后缀名的文件 5.vue3项目使用前 ...
如何让nginx执行python代码_生产环境部署Python语言代码（django+uwsgi+nginx）
本文主要向大家介绍了生产环境部署Python语言代码(django+uwsgi+nginx),通过具体的内容向大家展示,希望对大家学习Python语言有所帮助. 基础环境不做介绍,在django开发w ...
vue在生产环境、测试环境和开发环境，三种环境下配置不同的api地址
vue在生产环境.测试环境和开发环境,三种环境下配置不同的api地址我们大多数在开发的时候,都会有三种环境,一个是开发环境,一个是测试环境,一个是生产环境,我们打包的时候需要根据不同的环境去加载不同 ...
JAVA开发与运维（web生产环境部署）
web生产环境部署,往往是分布式,和开发环境或者测试环境我们一般使用单机不同. 一.部署内容 1.后端服务 2.后台管理系统vue 3.小程序二.所需要服务器 5台前端服务器 8台后端服务三.所需 ...
Spring Boot 最佳实践（二）集成Jsp与生产环境部署
一.简介提起Java不得不说的一个开发场景就是Web开发,也是Java最热门的开发场景之一,说到Web开发绕不开的一个技术就是JSP,因为目前市面上仍有很多的公司在使用JSP,所以本文就来介绍一下S ...
django生产环境部署
最近尝试进行一些python web生产环境部署的任务.主要是使用django框架进行web开发.本地使用windows + python3.7可是上到服务器之后是ubuntu系统.ubuntu默认是 ...
springcloud生产环境一般怎么部署_机器学习模型生产环境部署的四种系统架构总结...
本文将从简单到复杂介绍典型架构的特点以及其优缺点. 介绍一旦数据科学家对模型的性能感到满意,下一步便是"模型生产环境部署", 没有系统的合理配置,您的Kaggle Top1模型可 ...
Django + Uwsgi + Nginx 实现生产环境部署1
项目开发完毕后,需要将代码放到服务器上,这样用户才能访问.接下来我们一步一步来进行一波部署操作. 1. 简单粗暴项目开发完毕,在部署之前需要再配置文件中将 ALLOWED_HOSTS配置设置为:当前 ...

Vue.js 生产环境部署