鏈枃浼氫笉瀹氭湡鏇存柊鎬荤粨nuxt.js閬囧埌鐨勯棶棰樸€傝浆杞借娉ㄦ槑鍑哄锛屽皧閲嶄綔鑰咃紝璋㈣阿锛佹敞锛氱増鏈负1.0+锛岄€傜敤浜庝綆鐗堟湰nuxt鎸囧崡锛?.0+浠ヤ笂涓嶉€氱敤銆傚己鐑堟帹鑽愪綔鑰呮枃妗ｇ増鐨勮俯鍧戞敾鐣ワ紝鐐瑰嚮璺宠浆馃憠韪╁潙鏀荤暐Nuxt鐨勫畼鏂规枃妗ｄ腑锛屼腑鏂囨枃妗ｅ拰鑻辨枃鏂囨。鏈変笉灏忕殑鍖哄埆銆?銆佽矾寰勫尮閰嶉棶棰橈細鍦∟uxt.js涓紝璺緞鍖归厤鏄繖鏍风殑锛欯importurl('~assets/css/style.css')//Error杩欎釜璺緞鍖归厤鏄敊璇殑锛岃繖鏍峰啓鏄彲浠ョ殑锛欯importurl('~/assets/css/style.css')//鎴愬姛涔熷氨鏄鍦ㄦ渶鏂扮殑鐗堟湰鏇存柊涓紝瀹樻柟淇浜嗚矾寰勫尮閰嶉棶棰橈細瀹樻柟鎺ㄨ崘浣跨敤~/assets鏉ュ尮閰嶈矾寰勶紝鑰屼笉鏄湪涓枃鏂囨。涓娇鐢╥n~assets鏉ュ尮閰嶈矾寰勩€傚湪涓枃鏂囨。涓紝娌℃湁閽堝姝ら棶棰樼殑淇鎴栨洿鏀广€?.鎸夐渶浠嬬粛锛圲I妗嗘灦绛夛級姣斿浣跨敤UI妗嗘灦锛歟lement-ui鎵句簡寰堝鐩稿叧鏂囩珷锛屽苟娌℃湁鍏蜂綋璇存槑濡備綍浠嬬粛銆傛墍浠ユ兂鎶婂畠鎷垮嚭鏉ヨ鏄庝竴涓嬶細鍏堢湅涓€涓嬶紝濡傛灉涓嶆寜闇€瀵煎叆vendor.js锛屼綋绉ぇ灏忎负锛氱涓€姝ワ紝涓嬭浇渚濊禆锛?涓嬭浇element-uinpminstallelement-ui--save#濡傛灉浣跨敤鎸夐渶瀵煎叆锛屽繀椤诲畨瑁卋abel-plugin-component锛堝畼缃戦渶瑕佷笅杞借鏄庯紝杩欎釜鎻掍欢鏍规嵁瀹樼綉鐨勮鍒欎笉鍚岋紝鎻掍欢鐨勫畨瑁呬篃涓嶅悓锛塶pminstallbabel-plugin-component--save-dev瀹夎瀹屾垚鍚庯紝鎸夌収nuxt.js涓殑瑙勫垯锛岄渶瑕佸湪plugins/鐩綍涓嬪垱寤哄搴旂殑鎻掍欢鏂囦欢銆傚湪鏂囦欢鐨勬牴鐩綍涓嬪垱寤猴紙鎴栧凡缁忓瓨鍦級plugins/鐩綍锛屽苟鍒涘缓涓€涓悕涓猴細element-ui.js鐨勬枃浠讹紝鍐呭濡備笅锛歩mportVuefrom'vue'import{Button}from'element-ui'//寮曞叆Button鎸夐挳exportdefault()=>{Vue.use(Button)}绗簩姝ュ湪nuxt.config.js涓鍏ユ彃浠讹紝娣诲姞閰嶇疆涓猴細pluginscss:['element-ui/lib/theme-chalk/index.css'],plugins:['~/plugins/element-ui']榛樿鏄細寮€鍚疭SR锛屼娇鐢ㄦ湇鍔＄娓叉煋锛屼篃鍙互鎵嬪姩閰嶇疆鍏抽棴SSR锛岄厤缃负锛歝ss:['element-ui/lib/theme-chalk/index.css'],plugins:[{src:'~/plugins/element-ui',ssr:false//鍏抽棴ssr}]绗笁姝ワ紝閰嶇疆nuxt.config.js涓殑babel閫夐」锛屽湪build閫夐」涓厤缃紝瑙勫垯涓哄畼缃戣鍒欙細build:{babel:{//閰嶇疆鎸夐渶瀵煎叆瑙勫垯"plugins":[["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]]},/***鍦ㄤ繚瀛樻椂杩愯ESLINT*/extend(config,ctx){if(ctx.isClient){config.module.rules.push({enforce:'pre',test:/\.(js|vue)$/,loader:'eslint-loader',exclude:/(node_modules)/})}}}姝ゆ椂锛屾垜浠鍦ㄨ瀵熸墦鍖呭悗鐨勬枃浠跺ぇ灏忥紝濡傚浘鍥句腑锛氭鏃讹紝鎴戜滑鎴愬姛瀹屾垚浜嗘寜闇€瀵煎叆閰嶇疆3銆佸垵濮嬪寲鑴氭墜鏋剁殑閫夋嫨锛氬畼缃戞彁渚涚殑鍒濆鍖栬剼鎵嬫灦鏄細#BasicNuxt.jsprojecttemplatevueinitnuxt/startertemplate鍏跺疄瀹樻柟涔熸彁渚涗簡鏇村鐨勬ā鏉夸緵鎴戜滑浣跨敤锛屾垜灏变笉鍦ㄤ簡涓枃鏂囨。鏈壘鍒拌鏄庯細nuxt/starterBasicNuxt.js椤圭洰妯℃澘nuxt/expressNuxt.js+Expressnuxt/koaNuxt.js+Koa2nuxt/adonuxtNuxt.js+AdonisJSnuxt/microNuxt.js+Micronuxt/nuxtent閫傚悎鍐呭鐨凬uxt.js+閲嶇珯鐨凬uxtent妯″潡锛屾垜浠娇鐢ㄥ熀纭€妯℃澘鍒濆鍖栭」鐩€傞儴缃叉柟寮忎负锛氱涓€姝ワ紝鎵撳寘锛氭墽琛宯pmrunbuild鏃讹紝nuxt浼氳嚜鍔ㄦ墦鍖呯浜屾锛岄€夋嫨瑕侀儴缃茬殑鏂囦欢锛?nuxt鏂囦欢澶筽ackage.json鏂囦欢nuxt.config.js鏂囦欢锛堝鏋滀綘閮ㄧ讲浜嗕竴浜沺roxy锛屼綘闇€瑕佷笂浼犺繖涓枃浠讹紝涓汉寤鸿涓婁紶锛夌涓夋锛屽惎鍔ㄤ綘鐨刵uxt锛堥噸瑕侊級浣跨敤pm2鏉ュ惎鍔ㄤ綘nuxt.jspm2startnpm--name"demo"--runstart杩欓噷锛屾垜鎵惧埌浜嗕竴涓棶棰橈紝濡傛灉浣犵敤鐨勬槸windowserver鏈嶅姟鍣紝鐢╬m2鍚姩鐨勬椂鍊欎細鎶ラ敊锛屾姤閿欏涓嬶細濡傛灉浣犲湪linux鏈嶅姟鍣ㄤ笅鍚姩锛屽悓鏍风殑鍛戒护锛屽悓鏍风殑鎵ц锛屼笉浼氭姤閿欙細杩欓噷浣跨敤LinuxCentOS7銆傛墍浠ヤ釜浜哄缓璁湪浣跨敤鍒濆鍖栨ā鏉挎椂锛岃閫夋嫨express鎴栬€卥oa杩涜鍒濆鍖栥€傚師鍥犲涓嬶細1.浣跨敤鍩虹妯℃澘鍒濆鍖栵紝瑙傚療package.json鐨勫惎鍔ㄦ柟寮忓涓嬶細"scripts":{"dev":"nuxt","build":"nuxtbuild","start":"nuxtstart","generate":"nuxtgenerate","lint":"eslint--ext.js,.vue--ignore-path.gitignore.","precommit":"npmrunlint"}2.浣跨敤express/koa鍒濆鍖栨ā鏉匡紝瑙傚療package.json鐨勫惎鍔ㄦ柟寮忓涓嬶細"scripts":{"dev":"backpackdev","build":"nuxtbuild&&backpackbuild","start":"cross-envNODE_ENV=productionnodebuild/main.js","precommit":"npmrunlint","lint":"eslint--ext.js,.vue--ignore-path.gitignore."}鍦ㄥ惎鍔ㄦ柟闈紝鐩告瘮杈冭€岃█锛屾垜涓汉璁や负express/koa鏇寸伒娲伙紝鐩存帴鍚姩build/鐨刴ain.js鏂囦欢鍚姩璧锋潵姣旇緝鐩磋锛屽叧閿槸鍦╳indowsserver涓嬩篃鍙互杩愯娉ㄦ剰锛氬鏋滀娇鐢╡xpress/koa妯℃澘鍒濆鍖栵紝閮ㄧ讲鏈嶅姟鍣ㄦ椂蹇呴』鍚屾椂涓婁紶build/鐩綍锛侊紒锛?.鍦ㄦ彃浠朵腑鑾峰彇vue缁戝畾銆傛垜浠渶瑕佸湪axios鎻掍欢涓厤缃甃oading鍔犺浇鏁堟灉銆備緥濡傦紝浠lement-ui妗嗘灦涓轰緥锛?.鍒涘缓鎻掍欢鍦ㄦ枃浠舵牴鐩綍涓嬪垱寤猴紙鎴栧凡缁忓瓨鍦級plugins/鐩綍锛屽苟鍦ㄧ洰褰曚笅鍒涘缓涓€涓悕涓猴細axios.js鐨勬枃浠讹紝鍐呭濡備笅锛歩mportVuefrom'vue'varvm=newVue({})//鑾峰彇vue瀹炰緥exportdefaultfunction({$axios,redirect}){$axios.onRequest(config=>{if(process.browser){//鍒ゆ柇鏄惁涓哄鎴风(蹇呭～)vm.$loading();}})$axios.onResponse(response=>{if(process.browser){//鍒ゆ柇鏄惁涓哄鎴风(蹇呴渶鐨勶級璁╄礋杞?vm.$loading锛堬級;load.close锛堬級;}}锛?axios.onError锛坋rror=>{constcode=parseInt锛坋rror.response&&error.response.status锛塱f锛堜唬鐮?==400){redirect('/400')}})}姝ｅ瀹樻柟鎵€璇达紝涓嶉渶瑕佸儚鍘熺敓axios閭ｆ牱杩斿洖涓€涓猚onfig銆?銆侀厤缃畁uxt.config.js鏂囦欢锛屽湪plugins閫夐」涓坊鍔狅細plugins:['~/plugins/axios']娣诲姞modules閫夐」锛屾坊鍔犲涓嬬ず渚嬶細modules:['@nuxtjs/axios']Configure闃叉澶氶噸鎵撳寘锛氬湪build閫夐」涓紙榛樿浼氶厤缃畁uxt.config.js锛夛紝娣诲姞vendor閰嶇疆椤癸細build:{vendor:['axios']}杩欐牱鍔犺浇鏂规硶灏卞彲浠ヨ皟鐢ㄤ娇鐢ㄤ簡蹇箰鍦般€傦紙褰撶劧杩樻湁鍏朵粬璋冪敤vue瀹炰緥鐨勬柟寮忥紝姣忎釜浜虹殑涔犳儻涓嶅悓锛屼娇鐢ㄦ柟寮忎篃涓嶅悓銆傦級浜斻€佸湪Nuxt.js涓厤缃唬鐞嗚В鍐宠法鍩熸垜浠煡閬撳湪vue涓厤缃唬鐞嗘槸闈炲父鏂逛究鐨?cli锛屽彧闇€瑕佸埌config/鐩綍涓嬬殑index.js涓壘鍒皃roxyTable锛屾坊鍔犲嵆鍙€傚湪nuxt涓紝杩橀渶瑕佷慨鏀筺uxt.config.js閰嶇疆鏂囦欢銆?.鍘熸潵閰嶇疆浠ｇ悊鐨勬柟娉曟槸浣跨敤@nuxtjs/axios鍜孈nuxtjs/proxy鏉ヨВ鍐宠法鍩?)銆備笅杞芥彃浠?涓嬭浇鎻掍欢npminstall@nuxtjs/axios@nuxtjs/proxy--save2)銆傞厤缃彃浠跺湪nuxt.config.js涓坊鍔犻厤缃」锛歮odules鍜宲roxy銆俥xportdefault={modules:['@nuxtjs/axios','@nuxtjs/proxy'],proxy:[['/json.html',{target:'http://www.xxxx.com'}]//娉ㄦ剰杩欓噷涔熸槸涓€涓暟缁刔}鎸夌収涓婇潰鐨勬柟娉曪紝浠ｇ悊宸茬粡瀹屾垚锛屽彲浠ヨ繘琛岃法鍩熻姹備簡銆?.绗簩绉嶆柟娉?)鐨勪唬鐞嗛厤缃€備笅杞芥彃浠舵湰娆″彧闇€瑕佷笅杞紷nuxtjs/axios鎻掍欢鍗冲彲銆?涓嬭浇鎻掍欢npminstall@nuxtjs/axios--save2).閰嶇疆鎻掍欢module.exports={modules:['@nuxtjs/axios',],axios:{proxy:true},proxy:{'/api':'http://api.example.com','/api2':'http://api.another-website.com'}}鐗瑰埆娉ㄦ剰锛氭鏃禷xios閫夐」鏄竴涓璞★紙object锛夛紝proxy閫夐」鏄竴涓璞★紙object锛夈€侤nuxtjs/axios閰嶇疆椤筽athRewriteoption(rewrite鍦板潃)濡傛灉閰嶇疆pathRewrite閫夐」锛屽彲浠ヤ娇鐢ㄧ浜岀鍐欐硶锛屽涓嬶細proxy:{'/api/':{target:'http://api.example.com',pathRewrite:{'^/api/':''}}}/api/灏嗚娣诲姞鍒板API绔偣鐨勬墍鏈夎姹備腑銆傚彲浠ヤ娇鐢╬athRewrite閫夐」鍒犻櫎銆傚洜涓哄湪ajaxurl涓姞浜嗗墠缂€/api锛屼絾鏄師鏉ョ殑鎺ュ彛鏄病鏈夎繖涓墠缂€鐨勩€傛墍浠ラ渶瑕侀€氳繃pathRewrite閲嶅啓鍦板潃锛屾妸鍓嶇紑/api鏀规垚/鎴栬€?'銆傚鏋滀綘鑷繁鐨勬帴鍙ｅ湴鍧€鏈?api杩欐牱鐨勯€氱敤鍓嶇紑锛屽彲浠ュ幓鎺塸athRewrite銆俽etry閫夐」锛堣嚜鍔ㄦ嫤鎴け璐ョ殑璇锋眰锛夊彲浠ュ湪axios閫夐」涓厤缃畆etry閰嶇疆椤癸紝鑷姩鎷︽埅澶辫触鐨勮姹傘€傞粯璁や负3娆°€俛xios:{retry:{retries:3}}progress閫夐」锛堝彂鍑鸿姹傛椂鏄剧ず鍔犺浇鏉★級涓嶯uxt.js杩涘害鏉￠泦鎴愶紝鍙戝嚭璇锋眰鏃舵樉绀哄姞杞芥潯銆傦紙浠呭湪娴忚鍣ㄤ笂锛屽姞杞芥爮鍙敤鏃躲€傦級鎮ㄨ繕鍙互浣跨敤杩涘害閰嶇疆涓烘瘡涓姹傜鐢ㄨ繘搴︽爮銆倀his.$axios.$get('URL',{progress:false})baseURL閫夐」锛堟湇鍔″櫒绔粯璁よ姹傚湴鍧€锛変娇鐢ㄥ苟棰勫厛鍒涘缓鏈嶅姟鍣ㄧ璇锋眰鐨勫熀鏈琔RL銆俠rowserBaseURL閫夐」锛堝鎴风榛樿璇锋眰鍦板潃锛夊湪瀹㈡埛绔娇鐢ㄥ苟棰勫厛鍒涘缓璇锋眰鐨勫熀鏈琔RL銆傛湰鏂囧悓姝ユ洿鏂颁簬涓汉鍗氬銆傛湰鏂囧鏈夐敊璇紝璇峰湪涓嬫柟鐣欒█锛屽強鏃舵洿姝ｏ紝璋㈣阿锛?/p>
