上面开始整篇爬坑之旅

# 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}