Nuxt項目搭建到發布部署


一、項目目錄結構:

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

目錄會是這樣(具體目錄都放些什么,請看官方文檔,詳細):

 

方式2、手工慢慢來,請看官方文檔: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

 

二、為項目添加sass樣式表:

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

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

注:如果你需要在.vue文件內進行使用,需要在style標簽中添加 lang="scss" 如:

 

三、發起請求時需要使用 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/)

1、你需要先在 plugins 目錄下添加一個文件 axios.js,如:

 

 

2、引用使用,在nuxt.config.js中的plugins添加 '@/plugins/axios.js',如:

3、想要生效看到效果是吧?請重新啟動服務,命令:npm run dev

 

四、動態路由

1、假如你希望你的站點鏈接對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>

 

 五、服務端渲染應用部署

1、需要發布的文件准備

(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)

 

2、需要放置到服務器上的代碼只需要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" 。

3、那么,現在把所需要的代碼都准備好了后,那么接下來,把相關目錄文件上傳到你的域名所指向的根目錄。

4、接下來得修改下服務端的配置文件,添加路徑轉發(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

5、最后,切換到域名所指向的根目錄下,先可以npm i (安裝項目所需要的所有依賴).

6、好了,感覺快好了,運行 npm run start 跑起來吧。

7、如果沒有意外,運行了npm run start 后  再訪問下你指定的域名,那是可以看到效果的了(右鍵查看源文件,可以看到渲染出數據了).

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

 

六、安裝pm2

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

2、安裝完pm2后,那么就直接跑咯,命令:pm2 start npm -- run start (執行了這命令后就不用單獨執行npm run start了哦),這里域名理論是能正常訪問了,接下來,這服務就會一直在跑了,除非:你執行了pm2 stop (后面可以接相關參數的)停止了它。

3、當然了當你想查看下pm2所守護的進程有什么的話你可以用 pm2 list  , 又或者你想重新發布了項目后需要再重啟一把,那你可以用 pm2 restart  

注:如果同一個服務器需要起多個pm2進程的話,可以以設置環境變量的形式。如:PM2_HOME=“xxx” pm2 start ........   https://pm2.keymetrics.io/docs/usage/specifics/

 

七、靜態應用部署

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

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

 

 

 

 好咯,就這么多先,有想法的可以一起評論來研究下哦~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM