Nginx+Vuejs(router)使用webpack打包发布(Ubuntu)

1. 准备工作

前面文章已经介绍到怎样在win10下安装部署vuejs的webpack脚手架工具，关于怎样使用vuejs的webpack工具写项目不是本文的重点，现在默认我们已经写好了我们的网站

• 我的用于学习测试的工程目录：
  
• 修改src/router/index.js这个文件中的路由配置：使用history模式和路由基目录base的设置（更多资料可查阅官方文档）

/**** src/router/index.js ****/
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ItemPage from '@/components/ItemPage'
import NotFoundComponent from '@/components/NotFoundComponent'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: '/',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/page',
      name: 'page',
      component: ItemPage
    },
    {
      path: '*',
      name: 'NotFound',
      component: NotFoundComponent
    }
  ]
})

2. 打包vuejs工程

在工程的根目录下执行指令：npm run build

• 很多博客说要修改什么路径加个点，我看到一篇博文说其实不然，如果是这样为什么官方不默认直接帮我们加上呢？反正我没有动config/index.js
• 执行完后会在工程根目录下生成一个dist的文件夹，内容大概是这样的：
  

3. 上传文件并配置nginx

• 把上面生成的dist整个文件夹的文件上传到公网可访问的服务器，假设这里上传到的位置是：/home/www/test/public

• 默认我们的服务器已经成功安装了nginx

  root@ubuntu:~# apt-get install nginx
  root@ubuntu:~# /etc/init.d/nginx start

• 修改nginx配置文件（参考官方文档）

  server {
          listen 80;
          server_name ip或者域名;
          root /home/www/test/public;
          index index.html;
  
          location / {
                  try_files $uri $uri/ /index.html;
          }
  }

• 重启nginx服务：root@ubuntu:~# service nginx restart

4. 访问我们的网站

• 直接访问ip或域名即webpack默认保留的主页
• 访问ip或域名/page可以访问到我们自己写好的page路由对应的页面
• 正如官方文档所说，像上面那样配置nginx之后，我们的服务器不再返回404错误页面，因为对于所有路径都会返回index.html文件。为了避免这种情况，所以我根据官方文档的建议写了一个404页面，也就是准备工作里的NotFoundComponent，就是说：所有在vue路由找不到正确匹配的页面都会返回定义好的404页面，如下图所示访问的是ip或域名/he：
  

5. 一个彩蛋

上面的404页面有一个a标签，点击它是在当前页面刷新出/page页面的，也就是说没有支持_blank属性的a标签。

一开始我单纯使用a标签是无法完成跳转的，搜索并查阅了一些资料，最后我是这样写的：

<p>You can visit our web <router-link to='/page'>here</router-link></p>

更多资料参考官方文档

6. 我的疑问

其实真正的实际情况是：我的服务器的80端口已经被一个服务占用了，折腾了大半天还是没办法解决使用80端口同时接管两个服务的问题，最后我是使用了8080端口来接管我的vuejs项目的。

尝试过二级域名的办法，vuejs的主页页面会返回nginx的默认欢迎页面；尝试过各种location的匹配规则，依然没有成功（惭愧=。=）

更新于2018/9/14

关于上面第六点的疑问，解决办法是：两个服务都要用二级域名，二级域名需要在域名管理商处进行解析注册，修改完毕后的nginx配置如下：

修改/etc/nginx/sites-available/default文件，包含两个server块，然后重启nginx服务即可

• 服务站点1

server {
    listen 80;
    root /home/www/myflask;
    server_name web1.domain.cn;
    location / {
        try_files $uri =404;
        include uwsgi_params;
        uwsgi_pass 127.0.0.1:8001;   # 转发请求到该地址端口
        uwsgi_param UWSGI_SCRIPT main:app;   # 调用的脚本名称和application变量名
    }
}

• 服务站点2

server {
    listen 80;
    root /home/www/web2/public;
    server_name web2.domain.cn;
    index index.html; 
    location / {
        try_files $uri $uri/ /index.html;
    }
}