本文會不定期更新在nuxt.js中碰到的題目舉行匯總。轉發請申明出處,尊敬作者,感謝!
注重:版本為1.0+,合適低版本nuxt指南,不通用2.0+以上。
強烈引薦作者文檔版踩坑指南,點擊跳轉👉踩坑指南
在Nuxt的官方文檔中,中文文檔和英文文檔都存在着不小的差別。
1.途徑婚配題目:
In Nuxt.js, the path match is as follows:
@import url('~assets/css/style.css') //Error
This path matching is an error, and writing it like this is possible:
@import url('~/assets/css/style.css') //success
也就是說,在最新版本更新中,官方修復了途徑婚配題目:
而官方引薦運用~/assets
婚配途徑,而不是運用在中文文檔中的~assets去婚配途徑。
而在中文文檔中,也並未見修復及變動此題目。
2.按需引入(UI框架等等)
比方運用UI框架:element-ui
我找了許多相干文章,並沒有細緻申明該怎樣引入。所以我要拿出來將他申明:
先來看下,假如不按需引入vendor.js
的體積大小為:
第一步,下載依靠:
# 先下載element-ui
npm install element-ui --save
# 假如運用按需引入,必需裝置babel-plugin-component(官網有須要下載申明,此插件依據官網劃定規矩差別,裝置插件差別)
npm install babel-plugin-component --save-dev
裝置好今後,根據nuxt.js
中的劃定規矩,你須要在 plugins/
目次下建立響應的插件文件
在文件根目次建立(或已存在)plugins/
目次,建立名為:element-ui.js
的文件,內容以下:
import Vue from 'vue'
import { Button } from 'element-ui' //引入Button按鈕
export default ()=>{
Vue.use(Button)
}
第二步,引入插件
在nuxt.config.js
中,增加設置為:plugins
css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins:[
'~/plugins/element-ui'
]
默以為:開啟SSR,採納服務端襯着,也能夠手動設置封閉SSR,設置為:
css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins:[
{
src:'~/plugins/element-ui',
ssr:false //封閉ssr
}
]
第三步,設置
babel
選項
在nuxt.config.js
中,設置在build
選項中,劃定規矩為官網劃定規矩:
build: {
babel:{ //設置按需引入劃定規矩
"plugins":[
[
"component",
{
"libraryName":"element-ui",
"styleLibraryName":"theme-chalk"
}
]
]
},
/*
** Run ESLINT on save
*/
extend (config, ctx) {
if (ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
此時,我們在視察打包今後文件體積大小,如圖:
此時,我們勝利完成了按需引入設置。
3.初始化腳手架的挑選:
官網供應的初始化腳手架為:
# 基本的Nuxt.js項目模板
vue init nuxt/starter template
而實在,官方也供應了更多的模板以便於我們運用,而我在中文文檔並未發明有申明:
-
nuxt/starter
基本的Nuxt.js項目模板 -
nuxt/express
Nuxt.js + Express -
nuxt/koa
Nuxt.js + Koa2 -
nuxt/adonuxt
Nuxt.js + AdonisJS -
nuxt/micro
Nuxt.js + Micro -
nuxt/nuxtent
適用於內容較重網站的Nuxt.js + Nuxtent模塊
而我們運用基本的模板舉行初始化項目,布置體式格局為:
第一步,打包:
在實行npm run build
的時刻,nuxt
會自動打包
第二步,挑選要布置的文件:
-
.nuxt
文件夾 -
package.json
文件 -
nuxt.config.js
文件(假如你布置一些proxy,則須要上傳這個文件,個人發起把它傳上去)
第三步,啟動你的
nuxt
(主要)
運用pm2
啟動你的nuxt.js
pm2 start npm --name "demo" -- run start
在這裏,我發明個題目,假如你運用window server 服務器,在運用pm2
啟動時刻,會湧現毛病,毛病以下:
假如在Linux服務器
下啟動,一樣的敕令,一樣的實行,則不會湧現毛病:
這裏採納Linux CentOS 7
所以,個人發起,在採納初始化模板的時刻,請選用express
或許 koa
舉行初始化,來由以下:
1.採納基本模板初始化,視察package.json
的啟動體式格局以下:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
}
2.採納express
/koa
初始化模板,視察package.json
的啟動體式格局以下:
"scripts": {
"dev": "backpack dev",
"build": "nuxt build && backpack build",
"start": "cross-env NODE_ENV=production node build/main.js",
"precommit": "npm run lint",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
}
在start
中,對比下,個人以為express
/koa
更天真一些,它直接啟動了build/main.js
文件,更能直觀的啟動體式格局,而關鍵在於,也能夠在windows server
下運轉起來。
注重事項:假如採納
express
/
koa
的模板初始化,服務器布置的時刻,同時要上傳
build/
目次!!!
4.插件中獵取vue綁定
我們須要在axios的插件中設置Loading加載結果,比方運用element-ui
框架作為示例:
1.建立插件
在文件根目次建立(或已存在)plugins/
目次,建立名為:axios.js
的文件,內容以下:
import Vue from 'vue'
var vm = new Vue({}) //獵取vue實例
export default function ({ $axios, redirect }) {
$axios.onRequest(config => {
if (process.browser) { //推斷是不是為客戶端(必需)
vm.$loading();
}
})
$axios.onResponse(response=>{
if (process.browser) { //推斷是不是為客戶端(必需)
let load = vm.$loading();
load.close();
}
})
$axios.onError(error => {
const code = parseInt(error.response && error.response.status)
if (code === 400) {
redirect('/400')
}
})
}
如官方所說,並不須要像原生axios
一樣,去return
一個config
出來。
2.設置
nuxt.config.js
文件
在plugins
選項增加:
plugins:['~/plugins/axios']
增加modules
選項並增加以下示例:
modules:['@nuxtjs/axios']
設置防備屢次打包:
在build選項中(nuxt.config.js
會默許設置)增加vendor
設置項:
build:{
vendor:['axios']
}
如許就能夠挪用loading加載要領,而且興奮的運用了。
(固然另有其他的要領去挪用vue實例,每一個人習氣差別,運用體式格局差別。)
5.Nuxt.js中設置代辦處理跨域
我們曉得在vue-cli中設置代辦很輕易,只須要在config/
目次下的index.js
中找到proxyTable
增加即可,而在nuxt中一樣須要修正nuxt.config.js
設置文件。
1.原始設置代辦體式格局
運用@nuxtjs/axios
和@nuxtjs/proxy
舉行代辦處理跨域
1).下載插件
# 下載插件
npm install @nuxtjs/axios @nuxtjs/proxy --save
2).設置插件
在nuxt.config.js
增加設置項:modules
和proxy
。
export default = {
modules:[
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy:[
['/json.html',{target:'http://www.xxxx.com'}] //注重這也是一個數組
]
}
根據上面的體式格局已完成了代辦,能夠舉行跨域要求了。
2.第二種體式格局的代辦設置
1).下載插件
此次只須要下載@nuxtjs/axios
插件就能夠。
# 下載插件
npm install @nuxtjs/axios --save
2).設置插件
module.exports = {
modules: [
'@nuxtjs/axios',
],
axios: {
proxy:true
},
proxy:{
'/api': 'http://api.example.com',
'/api2': 'http://api.another-website.com'
}
}
特別注重:此時,axios
選項為對象(object
),proxy
選項為對象(object
)。
@nuxtjs/axios
的設置項
pathRewrite
選項(重寫地點)
假如設置pathRewrite
選項,能夠採納第二種寫法以下:
proxy: {
'/api/': { target: 'http://api.example.com', pathRewrite: {'^/api/': ''} }
}
/api/
將被增加到API端點的一切要求中。能夠運用pathRewrite
選項刪除。
由於在 ajax 的 url 中加了前綴 /api
,而底本的接口是沒有這個前綴的。
所以須要經由過程 pathRewrite 來重寫地點,將前綴 /api
轉為 /
或許是''
。
假如自身的接口地點就有 /api
這類通用前綴,就能夠把 pathRewrite
刪掉。
retry
選項(自動阻攔失利要求)
能夠在axios
選項中,設置retry
設置項,自動阻攔失利要求,默以為3次。
axios: {
retry: { retries: 3 }
}
progress
選項(發出要求時顯現加載欄)
與Nuxt.js
進度條集成,在發出要求時顯現加載欄。(僅在瀏覽器上,當加載欄可用時。)
您還能夠運用progress
設置為每一個要求禁用進度條。
this.$axios.$get('URL', { progress: false })
baseURL
選項(服務器端默許要求地點)
在服務器端運用和預先建立要求的基本URL。
browserBaseURL
選項(客戶端默許要求地點)
在客戶端運用和預先建立要求的基本URL。
本文同步更新在個人博客中,?點擊跳轉
本文假如有毛病的地方,請在下方留言以便於實時改正,感謝!