. nginx自身
- nginx -t
- ps -ef | grep nginx //nginx启动否？
- netstat -a | grep 80 //80端口开放否？
- firewall-cmd --list-all //看看防火墙开了80？
- firewall-cmd --add-service=http --permanent
- firewall-cmd --add-port=80/tcp --permanent //开80端口
- firewall-cmd --reload
- 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看看报什么错。
- 网上流行的几个坑：
- /config/index.js 里的 assetsPublicPath: '/', 要改为 './' （此坑我没碰到）
- router 里的 history坑 （我没碰到，我的router就是history，也没对nginx做任何多余处理，一切正常）
- 其他很多关于nginx设置的坑我都没碰到，nginx.conf文件里除了增加了try_file那一行之外，其他部分基本默认，改动极少。
- 我碰到的坑：
- 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，至此一切正常。
