关于javascript:Nginx部署Vueubuntu环境下

上面开始整篇爬坑之旅

# Linux 下装置，装置实现后应用 nginx - v 查看，如果输入 nginx 的版本信息表明装置胜利
sudo apt-get install nginx
# 启动  间接拜访 http:// 服务器 ip 或 http:// 域名  就能看到 nginx 服务器的默认页面
service nginx start

• 输出命令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
③. 批改如下：

server {
    ...
    
    root /home/xxxx/www;    
    #只需批改此局部，集体倡议放入 username 目录下，避免一系列因为权限问题的限度。...
    location / {}}

④. 实现nginx -s reload

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

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

scp [可选参数] file_source file_target

scp -r dist/* root@117.78.4.26:/www  
#举例：- r 是递归 dist 文件复制，dist 打包文件中有许多文件

②.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

location /test {
  alias /home/marhoo_ubuntu2/www;
  try_files $uri $uri/ /index.html;
  #这句配置的意思就是，拿到一个地址，先依据地址尝试找对应文件，找不到再试探地址对应的文件夹，再找不到就返回 /test/index.html
}