. 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 //強(qiáng)行使用指定配置文件
- 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自身的歡迎頁面應(yīng)該ok。
. Vue的操作
- npm run build //開始打包
- 將dist文件夾整個FTP到 /usr/local/nginx/html （也就是nginx的默認(rèn)html根目錄）
- 瀏覽器輸入http://ip地址
- 如瀏覽器空白一片民晒，說明有誤精居，按下F12看看報什么錯。
- 網(wǎng)上流行的幾個坑：
- /config/index.js 里的 assetsPublicPath: '/', 要改為 './' （此坑我沒碰到）
- router 里的 history坑 （我沒碰到潜必，我的router就是history靴姿，也沒對nginx做任何多余處理，一切正常）
- 其他很多關(guān)于nginx設(shè)置的坑我都沒碰到磁滚，nginx.conf文件里除了增加了try_file那一行之外佛吓，其他部分基本默認(rèn)，改動極少垂攘。
- 我碰到的坑：
- quill插件有一個quill-image-resize插件, 在dev模式的時候就不是按常規(guī)方法安裝的维雇，正常來說Vue的插件都是npm先安裝，再import晒他，那是這個插件就不能這樣裝吱型，只能先npm install后，強(qiáng)行修改/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程序調(diào)試階段就吃了大苦頭触徐，google了很多文檔才安好的。
- 回到發(fā)布階段狐赡，webpack在發(fā)布和調(diào)試階段使用不同的腳本撞鹉，調(diào)試階段是：
/build/webpack.dev.conf.js
正式發(fā)布，部署到服務(wù)器是：
/build/webpack.prod.conf.js - 因此將上面那行人工添加的代碼猾警，也填到webpack.prod.conf.js里面存盤退出孔祸，然后再跑一遍npm run build，再將dist傳到服務(wù)器发皿，不需要重啟nginx崔慧，直接瀏覽器F5，至此一切正常穴墅。
