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

Posted 2023-04-05

参考技术A

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如此项目部署就完成了。

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

Vue项目打包部署到Nginx服务器

“ 随着前后端分离项目的流行，vue项目开发部署也成为了前端人员必备技能；本文将带你学习vue项目部署及遇到的各种坑。”

关于vue项目部署不得不提的是配置文件vue.config.js 。

  注：本文使用最新vue3.0版本，如果你使用的是vue2.0配置方式略有不同。

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被自动加载。

// vue.config.jsmodule.exports = { // 选项...}

01

—

vue项目部署到根路径

vue.config.js选项 publicPath用于配置 "部署应用包时的基本 URL"。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。

也就是将项目部署到域名根路径的情况下选项publicPath 使用默认值不用设置。

module.exports = { // publicPath: '/', 部署项目到域名根路径的情况下选项publicPath不用设置。 outputDir: 'dist', // 输出文件目录 assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)   ...}

以“雨果学院后台管理中心”项目为例，

1. npm build 打包应用
   

2. 将编译包拷贝到nginx服务器html目录下
   

目录：D:
ginx-1.17.7html/disk50x.htmlindex.html

   3.  修改nginx配置文件nginx.config

 # D:
ginx-1.17.7conf
ginx.confg location / {    #root   html;  原配置    root html/dist; #修改后配置    index  index.html index.htm;}

   4. 启动nginx服务

   项目效果如下:

     5. 遇到的问题

         我们知道vue单页应用有两种加载模式，一种是默认的 hash 模式, 一种是history 模式，为了美观起见正式上线的应用中都会使用history模式。

         在history模式下，当刷新浏览器时会出现404错误 

  

解决方法修改nginx.config文件，添加try_files $uri $uri/ /index.html;

location / { root html/dist; index index.html index.htm; try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由 }

02

—

项目部署到子路径

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用publicPath选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

  

  1. vue.config.js配置

module.exports = { publicPath: '/my-app/', //访问子目录:http://www.my-app.com/myapp outputDir: 'dist', // 输出文件目录 assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts) }

 为了在开发环境方便测试一般如下配置

module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',  outputDir: 'my-app', // 输出文件目录 assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)}

2. 记得修改路径router.js

const router = new VueRouter({  mode: 'history', //使用history模式 base: '/my-app/',//默认路径process.env.BASE_URL, routes})

3. nginx.config配置

location / { root html; index index.html index.htm; try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由 }

03

—

centos部署nodejs项目

1. 下载Node.js安装包。

wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz

2.解压文件

tar xvf node-v6.9.5-linux-x64.tar.xz

3. 创建软链接，您就可以在任意目录下直接使用node和npm命令。

ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/nodeln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm

4. 查看node、npm版本

node -vnpm -v

5. 为了让nodejs在后台运行我们需要安装forever插件

  全局安装forever 

 npm install forever -g

6. 进入项目目录，运行

forever start ./bin/www

7. 查看forever运行的项目

forever list

8. 停止服务

forever stop 12528

04

—

总结

本文介绍了vue项目在history模式下打包部署的过程及遇到的问题，然后介绍了nodejs后台项目在centos上的安装运行。关于vue项目部署网上有很多介绍，一些是在vue2.0基础上介绍的，大家在使用时一定小时。更多vue配置建议大家参考官方vue.config.js配置文档，很多问题都可以找到答案。比如关于publicPath相对路径配置问题官方描述：

publicPath这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。
相对 publicPath 的限制相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:当使用基于 HTML5 history.pushState 的路由时；当使用 pages 选项构建多页面应用时。