Nginx部署Vue(ubuntu环境下)

Marhoo🐝 发布于 4 月 20 日

下面开始整篇爬坑之旅

输入命令 sudo -i，切换当前用户为root用户 ps -ef | grep nginx 查看Nginx进程 nginx -s reload 重新加载nginx配置 建议看英文How To Configure Nginx 1. sites-available是存放当前的server配置, 在这里修改。
2. sites-enabled是激活并使用的server配置（从sites_available的文件创建快捷方式到sites-enabled）
3.一般是在 sites-available中修改server配置，然后 ln -s /etc/ngix/sites-available/xx /etc/nginx/sites-enabled/xx建立文件软连接。 nginx -s reload会完成重载配置并完成真正的映射。 nginx官方入门文档
1.Serving Static Content
2.Setting Up a Simple Proxy Server

尝试简单的服务器提供静态内容

①.把一个index.html文件放入/home/xxxx/www目录中
②.修改sites-available中default文件的内容。命令：vim /etc/nginx/sites-available/default
③.修改如下：

④.完成sudo nginx -s reload

Vue项目打包同步文件到ubuntu服务器

①.同步服务器指令(学习)：

scp [可选参数] file_source file_target

②.package.json脚本中加一个push命令

③.访问看到了我们熟悉的界面

非域名根路径发布

  有时候同一台服务器同一端口下可能会根据目录划分出多个不同的项目，比如我们希望项目部署到http://xxx.com/test，这样访问http://xxx.com/test访问到的是项目的首页

Nginx配置

只需要添加一条location规则，分配访问路径和指定访问文件夹。我们可以把 /test指向之前创建的 /www文件夹，这里因为文件夹名称和访问路径不一致，需要用到alias这个配置。 这里要将 /test 配置放到 / 之前，意味着在路由进入的时候，会优先匹配 /test。如果根路径 / 下的项目有子路由 /test ，那 http://xxxx/test 只会访问到 /www 里的项目，而不会访问该子路由

webpack配置

  为了解决打包后资源路径不对的问题，需要在vue.config.js中配置publicPath，这里有两种配置方式，分别将publicPath配置为 ./ 和 /test 。

publicPath配置为 ./ ， 打包后资源引用路径为相对路径 publicPath配置为 /test ，打包后资源相对路径为从域名根目录开始的绝对路径

路径引用的静态资源找不到的问题

  打包过程中，public下的静态资源都不会被webpack处理，我们需要通过绝对路径来引用它们。当项目部署到非域名根路径上时，这点非常头疼；更加头疼的问题是在组件style部分使用public文件夹下的静态资源。
  关于静态资源的问题，vue-cli的推荐（学习）是尽量将资源作为你的模块依赖图的一部分导入（即放到assets中，使用相对路径引用），避免该问题的同时也带来其它好处：

history模式部署！学习

①.mode配置为 'history' ，如果部署到非域名根目录，publicPath必须使用绝对路径 /test 的配置形式，而不能用相对路径 ./

②.这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://xxxxx.com/test/id 具体路由地址时就会返回 404，这就不好看了。所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

③.nginx