Vue2.0 生产环境部署
 
 
 
简要：继上次搭建vue环境后，开始着手vue的学习;为此向大家分享从开发环境部署到生产环境（线上）中遇到的问题和解决办法，希望能够跟各位VUE大神学习探索，如果有不对或者好的建议告知下；~！
 
 
 
一、如何打包，部署到生产环境（线上）
 
npm run build
 
1. dist 文件结构（编译后，生成在vue目录下）
 
 
 
static （存放css/js/image)
index.html （编译后页面）
 
 
2. 部署生产环境（以Thinkphp为例）
 
（1） 建立子项目，创建控制器建立index方法；实例化模板；将编译后index.html存放在对应的视图下；

（2） 修改vue配置文件（dist下status文件，默认存放在项目的根目录；若无须改变请忽略此步骤！）　　
 
 
 
 　
 
二、不加载组件（非根目录）
 
原因：路由path错误　 
 
 
三、刷新页面（刷新路由）出现404
 
1. 为什么
 
vue路由设置 HTML5 History 模式，直接访问/刷新url会被http server直接解析到该文件路径（被相应的框架接管），但vue的路由是虚拟的（只是告知编译后index.html文件追寻到相应的路径），并不能直接找到这个file，所以会404；
 
2. 怎么做（针对nignx；具体参考：HTML5 History 模式）
 
location / {
　 root （index.html存在目录路径，比如：/admin/tpl/index/）
  try_files $uri $uri/ /index.html;
}

单配置此步骤，任意不存在页面（404）都会跳转到上述指定路径；详细解决办法请看下文；
 
四、任意不存在页面（404）都跳转到指定路径（针对解决404页面后）
 
 
 个人解决方法：制作404页面的组件；在routes.js配置，配置增加路由
 
{ path: '*', component: defaults }
 
 
 
 
作者：不动峰 
 出处：http://www.jianshu.com/users/c0abc9c5f51e/latest_articles 
 博客园：http://www.cnblogs.com/mylly/ 
 备注：现承接企业大型网站与接口开发，有意向的朋友请联系（QQ：857280707） 
 版权所有，欢迎保留原文链接进行转载：)
 

目录
 
1、整体架构
 
2、前端部署
 
3、flask部署
 
4、注意事项
 

1、整体架构
 
前后端分离架构，部署在同一台物理服务器上，使用前端路由，前后端通过json数据通信，前端通过axios访问后端api，需要解决跨域访问问题。
 
2、前端部署
 
我使用的是@vue/cli 4.x，直接npm run build后，将dist文件夹中的内容放在nginx服务器的html文件夹中，配置nginx服务器404页面指向前端主页index.html。
 
3、flask部署
 
flask生产环境部署需要uwsgi程序，pip install uwsgi可安装此程序。配置好uwsgi.ini文件，使用ini文件启动uwsgi。
 
首先解决跨域问题，将前端访问后端的api都加上/api前缀，在nginx中配置rewrite规则，将/api及之前的部分整体替换成要访问的ip和端口地址。
 
然后配置nginx服务器第二个端口（假设前端文件占用的是第一个端口），即上述/api改写后指向的端口，将此端口指向uwsgi代理的地址，即完成配置。
 
4、注意事项
 
注意vue.config.js中的devserver设置不会在生产环境中生效

 
生产环境部署
 
开启生产环境模式
不使用构建工具
使用构建工具
  
模板预编译
提取组件的 CSS
跟踪运行时错误

 
 
 
以下大多数内容在你使用 Vue CLI 时都是默认开启的。该章节仅跟你自定义的构建设置有关。
 
 
开启生产环境模式
 
  开发环境下，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' })
  )
 
或者配合 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 更好地进行压缩和缓存。
 
跟踪运行时错误
 
  如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。

生产环境部署
 
开启生产环境模式
 
开发环境下，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