Nuxt項目搭建到發佈部署

1、項目目錄結構：

方式一、直接利用官方提供好的腳手架工具進行搭建：npx create-nuxt-app <項目名>

目錄會是這樣(具體目錄都放些什麼，請看官方文檔，詳細)：

 

方式二、手工慢慢來，請看官方文檔：https://zh.nuxtjs.org/guide/installation#%E4%BB%8E%E5%A4%B4%E5%BC%80%E5%A7%8B%E6%96%B0%E5%BB%BA%E9%A1%B9%E7%9B%AE

 

2、爲項目添加sass樣式表：

步驟1：命令：npm install --save-dev node-sass sass-loader

步驟2：在根目錄的配置文件nuxt.config.js中進行引入你須要添加的全局樣式表，如：

注：若是你須要在.vue文件內進行使用，須要在style標籤中添加 lang="scss" 如：

 

3、發起請求時須要使用 axios時，假如你沒有安裝過相關的依賴，那麼：

方式1：命令：npm install --save-dev axios 

而後在哪一個頁面有須要時直接引用 import axios from 'axios'

方式2：命令：npm install --save-dev @nuxtjs/axios

（1）、進行全局配置，在nuxt.config.js中添加模塊 '@nuxtjs/axios' 如：

（2）、簡單使用如（具體能夠參照站點：https://zh.nuxtjs.org/guide/async-data）：

注：假如你想須要在一個地方進行統一設置接口請求的API,須要經過註冊攔截器和更改全局配置的話，你還能夠這樣：

（能夠參考文檔：https://axios.nuxtjs.org/)

一、你須要先在 plugins 目錄下添加一個文件 axios.js，如：

 

 

二、引用使用，在nuxt.config.js中的plugins添加 '@/plugins/axios.js'，如：

三、想要生效看到效果是吧？請從新啓動服務，命令：npm run dev

 

4、動態路由

一、假如你但願你的站點連接對SEO更加友好點（請求詳情的id不以問號的展現形式來鏈接），好比由 http........./product/details?id=xxxx 變爲 http........./product/xxxx。那麼，你能夠這樣玩：

(1)、目錄結構如（注意是 _id.vue）：

Nuxt.js會把目錄生成的路由表，如：

{ name: 'product-id', path: '/product/:id?', component: 'pages/product/_id.vue' }

固然，若是你以爲這樣的表述不夠清晰，請穩步這裏：https://zh.nuxtjs.org/guide/routing#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1

 

(2)、目錄結構好了，那麼在實際的頁面跳轉中，該怎樣把id傳過去呢？path還好理解，特別是當你用到name(推薦方式)進行處理時，請看如下寫法:

1)、方式1 (path): <nuxt-link :to="'/product/' + 這裏傳入你的id">點擊進入詳情</nuxt-link>,

好比item對象裏有個id：<nuxt-link :to="'/product/' + item.id">點擊進入詳情</nuxt-link>

2)、方式2 (name): <nuxt-link :to="{name: 'product-id', params: {id: 這裏傳入你的id}}">點擊進入詳情</nuxt-link>,

 同上，好比item對象裏有個id：<nuxt-link :to="{name: 'product-id', params: {id: item.id}}">點擊進入詳情</nuxt-link>

注：特別的，方式2時，傳遞id時請用params，要否則它自動識別不到。固然，若是你還有其它的參數要傳的話，能夠在params下的對象裏書寫，固然也能夠再多跟一個query的字段來把參數帶過去，如：

 <nuxt-link :to="{name: 'product-id', params: {id: item.id}, query: {xxx: xxxx}}">點擊進入詳情</nuxt-link>

 

 5、服務端渲染應用部署

一、須要發佈的文件準備

（1）、先進行代碼構建打包，命令：npm run build 

　　注：

　　　　1）、生成的包將會在 .nuxt 這個目錄下

　　　　2）、因.nuxt這個目錄在mac下是隱藏着的，因此（非Mac時能夠忽略如下幾點）

　　　　3）、須要顯示用命令：defaults write com.apple.finder AppleShowAllFiles -bool true

　　　　4）、當執行了以上顯示的後，接下來還須要操做重啓下「訪達」，  點擊後彈出的框 進行退出"訪達"（會本身重啓）

　　　　5）、這下就能夠看到隱藏的文件了，

　　　　6）、須要對文件能夠再隱藏時，執行defaults write com.apple.finder AppleShowAllFiles -bool false , 再執行下第4步便可 (命令在顯示的區別就是後面的 true 與 false)

 

二、須要放置到服務器上的代碼只須要4個目錄：.nuxt、static、nuxt.config.js、package.json如下圖：

注：目錄1（.nuxt）、這是打包構建好的全部依賴文件及源文件等等

　　目錄2（static）、就是靜態資源包，由於上面打包構建時，不會被打進去的，因此得帶上它

　　目錄3（nuxt.config.js）、一些配置文件，得帶上。

　　目錄4（package.json）、這就比較重要了,當"start": "cross-env NODE_ENV=production node server/index.js",時須要把它更改成："start": "nuxt start" 。

三、那麼，如今把所須要的代碼都準備好了後，那麼接下來，把相關目錄文件上傳到你的域名所指向的根目錄。

四、接下來得修改下服務端的配置文件，添加路徑轉發（proxy_pass）處理，因默認在本地運行時，都是訪問 http://localhost:3000 ，我用的是nginx.配置如：

server {
　　listen 80;
　　server_name demo.htmlx.club;
　　location / {
　　　　proxy_pass http://localhost:3010;
　　　　index index.html index.htm;
　　}

}

注：配置完後須要對nginx進行重啓，好比個人  cd /usr/local/nginx/sbin 到達sbin 下 判斷是否配置正確: ./nginx -t  ， 提示成功後就進行執行重啓操做：./nginx -s reload

五、最後，切換到域名所指向的根目錄下，先能夠npm i （安裝項目所須要的全部依賴）.

六、好了，感受快好了，運行 npm run start 跑起來吧。

七、若是沒有意外，運行了npm run start 後  再訪問下你指定的域名，那是能夠看到效果的了(右鍵查看源文件，能夠看到渲染出數據了).

八、那麼當你把剛纔執行運行 npm run start 的命令框關閉時，再看下你的域名是還能正常訪問？估計是掛了吧？沒事，咱們有的是解決辦法，請繼續往下走。。。

 

6、安裝pm2

一、全局安裝命令 npm i pm2 -g 

二、安裝完pm2後，那麼就直接跑咯，命令：pm2 start npm -- run start （執行了這命令後就不用單獨執行npm run start了哦），這裏域名理論是能正常訪問了，接下來，這服務就會一直在跑了，除非：你執行了pm2 stop （後面能夠接相關參數的）中止了它。

三、固然了當你想查看下pm2所守護的進程有什麼的話你能夠用 pm2 list  , 又或者你想從新發布了項目後須要再重啓一把，那你能夠用 pm2 restart  

注：若是同一個服務器須要起多個pm2進程的話，能夠以設置環境變量的形式。如：PM2_HOME=「xxx」 pm2 start ........   https://pm2.keymetrics.io/docs/usage/specifics/

 

7、靜態應用部署

一、當你的站是比較簡單的，對SEO也有些少要求的，那麼我建議你用靜態應用部署。

二、這部署比較簡單明瞭，就官網所說的 npm run generate，把生成的dist目錄下的文件一把丟到服務器所指定域名的根目錄下便可，啥事都沒了。。

 

 

 

 好咯，就這麼多先，有想法的能夠一塊兒評論來研究下哦~