2020-02-18 vue部署到nginx 注意事项

. nginx自身

1. nginx -t
2. ps -ef | grep nginx //nginx启动否？
3. netstat -a | grep 80 //80端口开放否？
4. firewall-cmd --list-all //看看防火墙开了80？
5. firewall-cmd --add-service=http --permanent
6. firewall-cmd --add-port=80/tcp --permanent //开80端口
7. firewall-cmd --reload
8. firewall-cmd --reload //再观察，OK

• pid错误？

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf //强行使用指定配置文件

• nano /usr/local/nginx/conf/nginx.conf //修改配置文件

pid        logs/nginx.pid; //这一行的注释取消，
server {
      listen       80;
      server_name  localhost;
      #charset koi8-r;
      #access_log  logs/host.access.log  main;
      location / {
          root   html;
          #index  index.html index.htm; //这一行可以注释掉
          try_files $uri $uri/ /index.html; //这一行是新增的
      }

• 至此nginx自身的欢迎页面应该ok。

. Vue的操作

• npm run build //开始打包
• 将dist文件夹整个FTP到 /usr/local/nginx/html （也就是nginx的默认html根目录）
• 浏览器输入http://ip地址
• 如浏览器空白一片，说明有误，按下F12看看报什么错。
• 网上流行的几个坑：

1. /config/index.js 里的 assetsPublicPath: '/', 要改为 './' （此坑我没碰到）
2. router 里的 history坑 （我没碰到，我的router就是history，也没对nginx做任何多余处理，一切正常）
3. 其他很多关于nginx设置的坑我都没碰到，nginx.conf文件里除了增加了try_file那一行之外，其他部分基本默认，改动极少。

• 我碰到的坑：

1. quill插件有一个quill-image-resize插件, 在dev模式的时候就不是按常规方法安装的，正常来说Vue的插件都是npm先安装，再import，那是这个插件就不能这样装，只能先npm install后，强行修改/build/webpack.dev.conf.js 这个文件，然后在里面的plugins里面手动添加：

  new webpack.ProvidePlugin({
    'window.Quill': 'quill',
    'Quill': 'quill/dist/quill.js'
  })
然后在引用的地方用这个格式：
import ImageResize from 'quill-image-resize-module'
Quill.register("modules/imageResize", ImageResize)

• 总之跟官方的“正常”使用方法大相径庭，这个事情我在dev程序调试阶段就吃了大苦头，google了很多文档才安好的。
• 回到发布阶段，webpack在发布和调试阶段使用不同的脚本，调试阶段是：
  /build/webpack.dev.conf.js
  正式发布，部署到服务器是：
  /build/webpack.prod.conf.js
• 因此将上面那行人工添加的代码，也填到webpack.prod.conf.js里面存盘退出，然后再跑一遍npm run build，再将dist传到服务器，不需要重启nginx，直接浏览器F5，至此一切正常。