本篇內(nèi)容是我自己做記錄用的，看官方文檔總是會(huì)覺(jué)得缺點(diǎn)東西，所以自己寫(xiě)篇文章記錄下，基本上就是在官方文檔加上一些自己的理解，如果有不對(duì)的地方歡迎下方評(píng)論留言。
1.安裝nuxt
官方文檔給了兩種安裝方式：
1）腳手架工具 create-nuxt-app
npx create-nuxt-app <項(xiàng)目名> （npx在NPM版本5.2.0默認(rèn)安裝了）
或
yarn create nuxt-app <項(xiàng)目名>
執(zhí)行命令后會(huì)要求選擇一些配置，對(duì)于新手來(lái)說(shuō)不好去選擇。這個(gè)需要就根據(jù)自己的需求選擇（多百度），我也沒(méi)有使用這一個(gè)方式全裝，就不多做描述了（我執(zhí)行npx create-nuxt-app時(shí)總是很慢，我的npm也很慢，通常用cnpm，所以后來(lái)就沒(méi)選擇這個(gè)）
2）從頭開(kāi)始新建項(xiàng)目
這個(gè)官方文檔安裝后只有基礎(chǔ)的node_module、package.json文件和 .nuxt文件夾，后續(xù)部署沒(méi)有描述，我在網(wǎng)上趙找了另一種安裝方法：
npm install -g vue-cli
vue init nuxt-community/starter-template 項(xiàng)目名稱(chēng)
安裝完成后，運(yùn)行
npm run dev
在瀏覽器中輸入 http://localhost:3000,就可以正常訪問(wèn)了
2.nuxt目錄結(jié)構(gòu)
assets：資源目錄 用于組織未編譯的靜態(tài)資源如 LESS、SASS 或 JavaScript。
components ：組件目錄 用于組織應(yīng)用的 Vue.js 組件。Nuxt.js 不會(huì)擴(kuò)展增強(qiáng)該目錄下 Vue.js 組件，即這些組件不會(huì)像頁(yè)面組件那樣有 asyncData 方法的特性。(就是在nuxt擴(kuò)展的方法只能在頁(yè)面組件pages 目錄下使用)
layouts： 布局目錄 用于組織應(yīng)用的布局組件。(想要改變基礎(chǔ)布局可以修改這里，也可以另外添加模板，只要在頁(yè)面組件文件中使用layouts屬性繼承就可以)
middleware： 目錄用于存放應(yīng)用的中間件。（目前還沒(méi)用過(guò)中間件）
pages：頁(yè)面目錄 用于組織應(yīng)用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件并自動(dòng)生成對(duì)應(yīng)的路由配置。（nuxt不需要配置路由，備注：params傳參，需要根據(jù)你所傳的參數(shù)去命名，如/index/:id/:name, 相對(duì)應(yīng)的文件目錄則為index/_id/_name.vue）
plugins：插件目錄 用于組織那些需要在 根vue.js應(yīng)用 實(shí)例化之前需要運(yùn)行的 Javascript 插件。（在nuxt.config.js中module.exports下配置plugins引入插件）
static：靜態(tài)文件目錄 用于存放應(yīng)用的靜態(tài)文件，此類(lèi)文件不會(huì)被 Nuxt.js 調(diào)用 Webpack 進(jìn)行構(gòu)建編譯處理
store：目錄用于組織應(yīng)用的 Vuex 狀態(tài)樹(shù) 文件。
nuxt.config.js：文件用于組織Nuxt.js 應(yīng)用的個(gè)性化配置文件
package.json： 文件用于描述應(yīng)用的依賴關(guān)系和對(duì)外暴露的腳本接口。
3.nuxt服務(wù)器部署
我這里是部署到nginx上，使用的是服務(wù)端部署（靜態(tài)部署也試了一下沒(méi)有仔細(xì)研究，動(dòng)態(tài)路由需要在nuxt.config.jspeizhi ）。
1）現(xiàn)在本地打包項(xiàng)目
npm run build
2）把打包后的文件壓縮上傳到服務(wù)器中域名所指向的文件夾，執(zhí)行：
npm i
npm run start
運(yùn)行后應(yīng)該就會(huì)是這樣
3）使用pm2進(jìn)程保證斷開(kāi)連接服務(wù)不會(huì)斷掉
pm2 list 查看pm2進(jìn)程列表
pm2 delete 進(jìn)程名/id 刪除進(jìn)程
pm2 start npm --name "進(jìn)程名" -- run start 啟動(dòng)進(jìn)程
僅僅是這樣還是不能直接加載網(wǎng)頁(yè)，nginx還需要配置
4）配置nginx
nuxt運(yùn)行在3000端口，nginx還需要做一些配置,因?yàn)槲业捻?xiàng)目中同一個(gè)域名中下有兩個(gè)項(xiàng)目，靜態(tài)資源需要分開(kāi)加載。
upstream nuxtserver1 {
server 127.0.0.1:3000;
}
server {
listen 443 ssl;
server_name dk.pxmsw.cn;
root /data/web/dksc/wechat/user;
ssl_certificate cert/dk.pxmsw.cn/1977719_www.aa.cn.pem;
ssl_certificate_key cert/dk.pxmsw.cn/1977719_www.aa.cn.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location ~ /organization-wx/.*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp3|wma|js|css)$ {
expires 3650d;
access_log off;
}
location ~ /organization-wx/.*\.(eot|otf|ttf|woff|svg)$ {
add_header Access-Control-Allow-Origin *;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp3|wma|js|css)$ {
expires 3650d;
access_log off;
proxy_pass http://nuxtserver1;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~ \.(eot|otf|ttf|woff|svg)$ {
add_header Access-Control-Allow-Origin *;
proxy_pass http://nuxtserver1;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location / {
root /data/web/dksc/wechat/user/wx-user;
index index.html index.htm;
error_page 404 /index.html;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Nginx-Proxy true;
proxy_cache_bypass $http_upgrade;
proxy_pass http://nuxtserver1;
}
location /organization-wx/ {
root /data/web/dksc/wechat/user/organization-wx;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log main;
}
仿照上面nginx配置后訪問(wèn)你的域名應(yīng)該就可以正常訪問(wèn)了。
參考鏈接：
https://segmentfault.com/a/1190000012774650；
http://www.itdecent.cn/p/840169ba92e6
