Nuxt.js(Vue SSR)專案配置以及開發細節
阿新 • • 發佈:2021-02-15
技術標籤:Nuxt.jsNuxt.jsSSRVue SSRVue 伺服器渲染
一、專案中不要使用 v-if
- 使用
v-if
會在檢視原始碼的時候無法顯示標籤,需要換成v-show
二、專案中跳轉頁面儘量使用 a
標籤
- 無論使用
vue router
還是使用nuxt-link
都不如使用a
標籤,而且前兩者在伺服器渲染中有時候還會有別的問題發生,所以可以直接使用a
標籤省事,避免了坑。
三、專案中更換 favicon.ico
不生效,可以編譯一下,啟動正式環境,就生效了。
四、專案中 請求介面資料,並伺服器渲染
,asyncData()
多介面請求的使用:
// asyncData 函式是 Nuxt.js 的生命週期函式,每個頁面只能實現一次 // 多介面請求 async asyncData () { let [request1Data, request2Data, request3Data] = await Promise.all([ getCreator(), getIndustryList() axios.get('http://localhost:3000/api/api/h5/creator/2795') ]) return { creator: request1Data.data.data.channelCreator, videoList: request1Data.data.data.videoList, data2: request2Data.data data3: request3Data.data } } // 單個介面請求 asyncData () { return getCreator().then(res => { const { code, data } = res.data if (code === 0) { return { creator: data.channelCreator, videoList: data.videoList } } }) }
五、專案中 如何獲取連結中帶的引數,並使用:
// 這種方式獲得的只能當前頁面使用,但是無法參與伺服器渲染使用,所以需要參與伺服器渲染的還是得在 asyncData() 中獲取 。 created () { // 初始化標籤選中 this.industry = this.$route.params.tag || 0 // console.log(this.$route); } // asyncData() 函式裡面會帶回來一個上下文,這個物件裡面有所有需要的物件集合 // https://www.nuxtjs.cn/api/context asyncData (context) { .... } // 獲取連結中帶的引數 async asyncData ({ query, params }) { .... }
六、專案中 自定義路由
,類似 Vue
一樣,找到 nuxt.config.js
,加上下面配置:
// 自定義路由,以及頁面引數 router: { extendRoutes(routes, resolve) { routes.push( { name: 'creator', path: '/creator/:id?/:tag?', component: resolve(__dirname, 'pages/creator-view.vue') }, { name: 'video', path: '/video/:id?', component: resolve(__dirname, 'pages/video-view.vue') } ) } },
七、專案中 新增代理
,類似 Vue
一樣,找到 nuxt.config.js
,加上下面配置:
但是如果是 ssr
開發,就不存在跨域一說了,都是伺服器直接組裝好直接返回整個頁面顯示,因此也不需要配置。
axios: {
proxy: true
},
proxy: {
'/api': {
target: 'http://10.0.90.164:8081',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
},
八、專案中新增 全域性樣式
、iconfont
等等,找到 nuxt.config.js
,加上下面配置:
css: [
'ant-design-vue/dist/antd.css',
'~/assets/css/reset.css',
'~/assets/iconfont/iconfont.css'
],
附帶一下 iconfont
的 plugins
配置,如果需要重寫路由攔截也可以新增到這裡面
plugins: [
'@/plugins/antd-ui',
// '@/plugins/router', // 路由守衛
{ src: '@/assets/iconfont/iconfont.js', ssr: false } // iconfont
],