正文

vue生产环境部署

小火柴的蓝色理想  小火柴的蓝色理想  2022-09-19  330

关键词：

前面的话

　　开发时，Vue 会提供很多警告来帮助解决常见的错误与陷阱。生产时，这些警告语句却没有用，反而会增加载荷量。再次，有些警告检查有小的运行时开销，生产环境模式下是可以避免的。本文将详细介绍Vue生产环境部署

生产环境

　　如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue)，生产时应该用精简版本 (vue.min.js)

　　如果用 Webpack 或 Browserify 类似的打包工具时，生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定，默认在开发状态。Webpack 与 Browserify 两个打包工具都提供方法来覆盖此变量并使用生产状态，警告语句也会被精简掉。每一个 vue-cli 模板有预先配置好的打包工具，但了解怎样配置会更好

【webpack】

　　使用 Webpack 的 DefinePlugin 来指定生产环境，以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句

var webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

【Browserify】

　　运行打包命令，设置 NODE_ENV 为 "production"。等于告诉 vueify 避免引入热重载和开发相关代码

　　使用一个全局 envify 转换 bundle 文件。这可以精简掉包含在 Vue 源码中所有环境变量条件相关代码块内的警告语句

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

【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

跟踪运行时错误

　　如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数和错误跟踪服务 (如 Sentry)，可能是个不错的主意

vue项目打包部署生产环境

vue项目打包部署生产环境打包部署生产环境之前需要修改配置文件：修改一：build>utils.js (修改publicPath:"../../",这样写是处理打包后找不到静态文件的问题)修改二：config>index.js (修改assetsPublicPath:‘./‘ ,修改目... 查看详情

vue.js+springboot打包部署至生产环境

参考技术A在config/index.js中有开发环境与生产环境的相关配置。工程build相关配置：其中env:require('./prod.env')指生产环境配置信息。存放在prod.env.js内，具体内容为：修改完毕后，进行打包并与后台工程合并部署。查看详情

vue.2.0.5-生产环境部署

...置实现这点。Webpack使用Webpack的 DefinePlugin 来指定生产环境，以便在压缩时可以让UglifyJS自动删除代码块内的警告语句。例如配置：varwebpack=require(‘webpack‘)module.exp 查看详情

小白研究项目部署-关于vue项目部署遇到的一些问题

...题是可以迎刃而解的。项目部署环境一般可以分为三种：生产环境，测试环境，开发环境。开发环境：开发环境时程序员专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最... 查看详情

如何一步步在生产环境上部署django和vue(代码片段)

本文由云+社区发表本文主要讲述了如何一步步在生产环境上部署django和vue，操作系统默认为centos说明：后文中出现的以下字符串均表示具体的路径或者名称，含义如下：DJANGO_DIR----表示django的工程根目录DJANGO_NAME----表示django的工... 查看详情

vuejs生产环境部署

　　VueJs为客户端语言，所以部署的时候是不需要基于nodejs或其他服务器运行环境，只需要像其他静态站点的方式发布就可以了，下面介绍一下VueJs具体发布的流程还有需要注意的点。　　先来看VueJs最终生成的文件目录：　　　... 查看详情

为啥不在 Vue 和 Vue Router 生产环境中渲染我的组件？

】为啥不在Vue和VueRouter生产环境中渲染我的组件？【英文标题】：WhynotrendermycomponentsinVueandVueRouterproduction?为什么不在Vue和VueRouter生产环境中渲染我的组件？【发布时间】：2019-12-2806:13:17【问题描述】：使用VueRouter部署Laravel和Vue... 查看详情

vue-cli3.x部署项目至生产服务器(代码片段)

...、Nginx服务器文件的配置serverlisten80;server_namewww.xxxxxx.com;#生产环境location/root/usr/local/www/xxx_program/;indexindex.html;try 查看详情

jenkins实现生产环境部署文件的回滚操作

由于dotnet项目的生产环境环境部署工具比较少，所以我使用jenkins作为生产环境的自动化部署工具。既然有回滚操作，那么就会有部署操作；要实现回滚，先要实现部署的操作，我在jenkins搭建了一键从测试环境发布到正式环境的... 查看详情

如何先使用实体框架代码部署到生产环境

】如何先使用实体框架代码部署到生产环境【英文标题】：Howtodeploytoproductionwithentityframeworkcodefirst【发布时间】：2013-07-0407:20:00【问题描述】：我从asp.netWebForms转向MVC和实体框架代码优先方法。我有个问题。如何设置我的环... 查看详情

orleans的生产环境部署

这一章非常简单只要照着官方文档做就行了文档地址打好NUGET包后Sql脚本是在项目下的OrleansAdoNetContent 查看详情

软件项目部署环境

...的分支，一般是feature分支。测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器上，是开发环境到生产环境的过度环境。测试环境的分支一般是develop分支，部署到... 查看详情

部署到生产环境的正确方法

】部署到生产环境的正确方法【英文标题】：Rightwaytomakedeploytoproduction【发布时间】：2019-04-1515:56:55【问题描述】：Symfonydocumentation表示将/public/build文件夹保留在.gitignore中所以当我推送我的文件时，生产中没有构建文件夹，所以... 查看详情

如何从本地 VirtualBox / Vagrant 开发环境部署到生产环境？

】如何从本地VirtualBox/Vagrant开发环境部署到生产环境？【英文标题】：HowisdeploymenttoProductiondonefromlocalVirtualBox/Vagrantdevelopmentenvironment?【发布时间】：2014-08-0218:04:51【问题描述】：最近我开始阅读有关使用虚拟化软件构建开发环境... 查看详情

生产环境部署容器的五大挑战及应对之策

Docker容器使应用程序开发变得更容易，但在生产中部署容器可能会很难。环境复杂性、生态系统易变性、跨不同分布式基础架构的部署......本文将为你解析生产环境部署容器的五大挑战及应对之策。软件开发人员通常只关注在特... 查看详情

一种简单的生产环境部署node.js程序方法

...，忍不住想与大家分享。配置文件首先，本地测试环境和生产环境的数据库连接这些配置信息是不一样的，需要将其分开为两个文件存储到config目录下，比如：开发环境配置文件config/development.js：module.exports={port:3001,mysql:{user:‘r... 查看详情

生产环境tomat部署之一

查看主机名、做本地解析[[email protected] ~]# hostnamewww[[email protected] ~]# cat /etc/hosts127.0.0.1 localhost localhost.localdomain localhost4&nbs 查看详情

部署到生产：为啥 CloudKit 删除订阅类型？

】部署到生产：为啥CloudKit删除订阅类型？【英文标题】：DeploytoProduction:WhyisCloudKitdeletingSubscriptionTypes?部署到生产：为什么CloudKit删除订阅类型？【发布时间】：2021-02-2600:26:06【问题描述】：我正在将更改从开发环境部署到生产... 查看详情

正文