nuxt 踩坑

1. 部署到阿里云 无法通过 ip:端口 访问

npm build 好后部署到阿里云 centos服务器 curl localhost:7878 可以访问，但是外网无法访问，防火墙是关闭的，后面，安全组对应的端口也是开放的，纠结死，后面发现是"host": "0.0.0.0"一定要写

  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "7878"
    }
  },

2. pm2 自动化部署遇到的坑

  apps: [
    {
      name: 'dadi-nuxt',
      script: 'npm',

      // Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/
      args: 'start',
      instances: 1,
      autorestart: true,
      watch: false,
      max_memory_restart: '1G',
      env: {
        NODE_ENV: 'development'
      },
      env_production: {
        NODE_ENV: 'production'
      }
    }
  ],

在本地运行是npm build 再 npm start 就行了，但是script 默认给的是app.js以为只能写js文件名，其实可以通过npm script启动的

3. 跳转尽量使用nuxt-link

头部商品列表是nuxtServerInit函数中调用接口得到的，在首页使用a标签跳转到company页面，发现store中的商品列表不在了，使用nuxt-link之后就好了，具体原因不得而知。

4. nuxt中asyncData参数，页面刷新后上下文store的值为空的问题

因为asyncData函数早于nuxtServerInit函数执行，所以拿不到store中的数据（nuxtServerInit调用接口填充store数据）

5. 在nuxtServerInit中请求数据，该函数需要返回promise

在nuxtServerInit中请求数据，该函数需要返回promise，如果不返回promise，那么在刷新没有请求数据的页面的时候，nuxtServerInit里请求到的数据并不会更新到页面中

  async nuxtServerInit({ commit, dispatch }, { req }) {
    await dispatch('fetchProductCategoryList')
  }

6. nginx设置了ssl,但是chrome仍然提示 您与此网站之间建立的连接并非完全安全

不安全 不安全

一直以为是我nginx配置ssl出了问题，

前提：

• nginx代理到nuxt
• 图片使用了阿里的oss，上传完成存到数据库中的图片链接是http 不是https

因为该服务器挂载了两个顶级域名，一开始认为是不是一个nginx不能配置多个HTTPS的域名
查看
nginx -V

nginx version: nginx/1.12.2
built with OpenSSL 1.0.2k-fips 26 Jan 2017
TLS SNI support enabled
支持多HTTPS域名配置
另一个站点就没问题，对比发现在nuxt.confg.js中多了这行

  head: {
    meta: [
      {
        'http-equiv': 'Content-Security-Policy',
        content: 'upgrade-insecure-requests'
      },
    ]
}

配置这个信息后及时img src链接是http,浏览器也会使用https进行请求，很神奇。

MDN 解释：

upgrade-insecure-requests

让浏览器把一个网站所有的不安全 URL（通过 HTTP 访问）当做已经被安全的 URL 链接（通过 HTTPS 访问）替代。这个指令是为了哪些有量大不安全的传统 URL 需要被重写时候准备的。

HTTP 响应头Content-Security-Policy允许站点管理者控制用户代理能够为指定的页面加载哪些资源。除了少数例外情况，设置的政策主要涉及指定服务器的源和脚本结束点。这将帮助防止跨站脚本攻击（Cross-Site Script）（XSS）。