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

珂朵莉的服务器镇楼

在搞清root，alias，try_files的基本用法后，我开始尝试vue项目的部署。
（用法我之前的文章也研究过）
此前，听说挺多小伙伴会遇到vue-router-history模式种种问题，比如路径无法匹配，找不到静态资源，刷新页面404，etc...

不急，只要找到原因，问题是可以迎刃而解的。

关于开发环境，生产环境 以及 process.env.NODE_ENV

项目部署环境一般可以分为三种：生产环境，测试环境，开发环境。

开发环境：开发环境时程序员专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。

生产环境：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。部署分支一般为master分支。

测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器，是开发环境到生产环境的过渡环境。

测试环境的分支存在bug，一般不会让用户和其他人看到，并且测试环境会尽量与生产环境相似。

如何区分生产环境和开发环境？

process.env.NODE_ENV 是 node 的全局变量 process 的一个属性，它的作用是区分当前环境是生产环境还是开发环境，

在 webpack 的默认情况下 --> process.env.NODE_ENV = production
          指定开发环境  --> process.env.NODE_ENV = development

可以参考学习： 理解webpack中的process.env.NODE_ENV

关于vue-cli3的配置

其实一般的vue单页面应用项目中，遇到路径无法匹配，或者资源引用错误问题都是由于以下几个属性造成的，如果你经常翻官网文档，那看到这里应该就已经会意，他们分别是：

module.exports = {
  publicPath//部署应用包时的基本 URL
  outputDir  //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  assetsDir //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
｝

接下来我将讲解以下这几个属性的使用。

publicPath

依照官网的解释，贴一张用法图：

publicPath

outputDir与assetsDir

outputDir assetsDir

具体使用与nginx配置

当使用基于 HTML5 history.pushState 的路由时，“相对 publicPath” 会受到限制，即是说在使用history模式时，publicPath需要设置为绝对路径。那么在vue.config.js文件中，你应该这样配置：

const projectName = 'history'
const isProduction = process.env.NODE_ENV === 'production' //是否生产环境，若不是则是开发环境
module.exports = {
  // 选项...
  outputDir: './dist/' + projectName, // 配置打包输出的路径
  publicPath: isProduction ? '/' + projectName + '/' : '/', //由于路由是history模式，需要绝对路径
  assetsDir: './assetsDir/', //  决定index.html中src引用资源的前缀，"./"指相对于outputDir
}

在nginx配置文件中你就需要这样配置：
假设我的项目名为history，并且放在/usr/local/webserver/nginx/myProject 目录下，如tree图

history项目结构

server {
    ...    //其它配置
//希望访问 http://localhost:8080/history 即访问该项目
  location /history {
      root myProject; 
      try_files $uri $uri/ /history/index.html;    // 使用try_files 在找到/history/index.html，解决404问题
  }
}

示例贴一下：珂朵莉的服务器 (点击about会使用路由跳转)

如果你的配置出现页面空白，或者404访问错误，资源引用问题（F12可观察），这时你就要检查publicPath，assetsDir甚至是nginx有没有配置正确了。

关于history模式下刷新404问题

我觉得原因是页面刷新时，服务器找不到任何的静态资源，就报404，那么解决办法就简单了：你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。即使用try_files 寻找index.html。
可以参考本项目的nginx配置：

  location /history {
      root myProject; 
      try_files $uri $uri/ /history/index.html;    // 使用try_files 在找到history文件夹的index.html
  }

但如此配置后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
参考官网例子：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

另一方面,有可能是Vue-Router没有配置好，需要注意初始化Router时候的base参数:

Vue-Router Api

如此项目部署就完成了。

感谢博哥指出之前文章错误之处，已经修正，谢谢