基于nodejs打包部署vue项目
一.本地环境调试请求跨域问题1.配置代理域名:
config/index.js
2.npm run dev 打包 生成 dist 目录 http 服务运行 里面的index.html文件
二.线上环境请求跨域
1.配置代理:
#简单代理
location /api {
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass http://域名;
}
2.打包命令 : npm run build
生成 dist 目录 http 服务运行 里面的index.html文件
绛旓細Vue.js鏄痺eb 鐣岄潰鐨勬笎杩涘紡妗嗘灦銆俈ue.js 鐨勭洰鏍囨槸閫氳繃灏藉彲鑳界畝鍗曠殑 API 瀹炵幇鍝嶅簲鐨勬暟鎹粦瀹氬拰缁勫悎鐨勮鍥剧粍浠躲俈ue.js 鑷韩涓嶆槸涓涓叏鑳芥鏋垛斺斿畠鍙仛鐒︿簬瑙嗗浘灞傘傚洜姝ゅ畠闈炲父瀹规槗瀛︿範锛岄潪甯稿鏄撲笌鍏跺畠搴撴垨宸叉湁椤圭洰鏁村悎锛堟澶勫彲浠ヨВ鍐充綘璇寸殑涓轰粈涔堣娣诲姞鍦node.js閲岀殑闂锛夈傚彟涓鏂归潰锛屽湪涓庣浉鍏冲伐鍏峰拰...
绛旓細nodejs鍜vue鐨勫叧绯诲涓嬶細1銆侀鍏坴ue.js鏄簱锛屼笉鏄鏋讹紝涓嶆槸妗嗘灦锛屼笉鏄鏋躲2銆Vue.js浣跨敤浜鍩轰簬HTML鐨勬ā鐗堣娉曪紝鍏佽寮鍙戣呭０鏄庡紡鍦板皢DOM缁戝畾鑷冲簳灞俈ue瀹炰緥鐨勬暟鎹俈ue.js鐨勬牳蹇冩槸涓涓厑璁镐綘閲囩敤绠娲佺殑妯℃澘璇硶鏉ュ０鏄庡紡鐨勫皢鏁版嵁娓叉煋杩汥OM鐨勭郴缁熴3銆乿ue.js涓嬭浇杩囨潵鐩存帴鍦╤tml涓紩鍏ュ氨濂戒簡骞朵笉涓瀹...
绛旓細vue鏄竴绉峧s妗嗘灦锛寃epack鏄鎵撳寘宸ュ叿锛nodejs涔熸槸js鍚庡彴妗嗘灦锛屼笁鑰呭氨鐩稿綋浜庢槸琛ㄥ厔寮燂紝琛ㄥ厔濡圭殑鍏崇郴锛屾病鏈夌洿绯讳翰灞炵殑鍏崇郴銆Vue.js 鑷韩涓嶆槸涓涓叏鑳芥鏋垛斺斿彧鑱氱劍浜庤鍥惧眰銆傚叾瀹冨簱鎴栧凡鏈夐」鐩暣鍚堛傚湪涓庣浉鍏冲伐鍏峰拰鏀寔搴撲竴璧蜂娇鐢ㄦ椂锛孷ue.js 涔熻兘瀹岀編鍦伴┍鍔ㄥ鏉傜殑鍗曢〉搴旂敤銆
绛旓細閫氳繃Vue鍜Node.js鎼缓鏀粯瀹濇敮浠樼郴缁燂紝鍙互瀹炵幇鏀粯瀹濇敮浠樻帴鍙ｉ泦鎴愩佹敮浠樺疂鏀粯娴佺▼銆佽鍗曠鐞嗐1銆佹敮浠樺疂鏀粯鎺ュ彛闆嗘垚锛氫娇鐢ㄦ敮浠樺疂鎻愪緵鐨勫紑鏀惧钩鍙版帴鍙ｏ紝瀹炵幇鏀粯瀹濇敮浠樺姛鑳斤紝鍖呮嫭鎵爜鏀粯銆佹墜鏈虹鏀粯銆佺數鑴戠鏀粯绛夈2銆佹敮浠樺疂鏀粯娴佺▼锛氶氳繃Vue鍓嶇椤甸潰鍜孨ode.js鍚庣鏈嶅姟鍣紝鎼缓鏀粯瀹濇敮浠樼殑瀹屾暣娴佺▼锛屽寘鎷...
绛旓細vue鍙互鍦ㄧ數鑴戜笂鎿嶄綔鐨勩1銆佷粠node.js鐨勫畼缃戜笅杞絥ode.js,鏈婕旂ず閫夋嫨鐨勬槸绋冲畾鐗堟湰銆2銆佸畨瑁卬ode.js锛屽熀鏈笂鏄竴璺痭ext锛岄噸鐐规槸瑕侀夋嫨瀹夎鐨勪綅缃紝鏈婕旂ず閫夋嫨瀹夎鍦‥:\nodejs閲屻3銆佸畨瑁呭畬姣曞悗,閰嶇疆node.js锛岃繍琛宑md锛屾墽琛宯pm璺緞閰嶇疆鍛戒护锛歯pm config set prefix "E:\nodejs\node_global"npm ...
绛旓細鍘籫ithub鎵句竴涓皬椤圭洰clone涓嬫潵锛屾湰鍦拌繍琛屼竴涓嬶紝浣犲氨鍏ラ棬浜嗭紝鐭ラ亾杩欎簺涓滆タ鐨勪綔鐢ㄦ槸浠涔堬紝鐜板湪鍓嶇閮芥槸鏄ā鍧楀寲寮鍙戯紝node鏄js鐨勮繍琛岀幆澧冿紝褰撲綘寮鍙戠殑鏃跺欓渶瑕佺敤鍒皀pm宸ュ叿鍖咃紝npm鏄竴涓粺涓鐨刯s鍖呯鐞嗙綉绔(璇寸櫧浜嗗氨鏄埆浜烘妸灏佽濂界殑js浠ｇ爜鏀惧埌npm涓婇潰锛屽苟涓嶅畾鏈熸洿鏂帮紝鎵鏈変汉閮藉彲浠ヤ笅杞戒笅鏉ョ敤鍒拌嚜宸辩殑椤圭洰...
绛旓細npm run dev 鏄敤鏉ュ湪鏈湴寮鍙戠殑鏃跺欏仛璋冭瘯鐢ㄧ殑锛vue寮鍙戠殑鏄墠绔殑涓滆タ锛屼笉鏄nodejs 鏈嶅姟绔▼搴忥紝鎸夐亾鐞嗚锛岀敓浜х幆澧冮噷灏变笉璇ュ瓨鍦╪pm锛岀敋鑷硁odejs涔熶笉闇瑕侊紙鐢╪odejs鏉ュ仛web闈欐佹湇鍔＄殑闄ゅ锛夛紝妤间富閫氳繃ssh杩涘叆鍒版湇鍔″櫒閲岋紝鍐嶈繍琛宯pm run dev 鏉ュ惎鍔ㄥ摢鏄紑鍙戞満涓婂仛鐨勪簨鎯呫傛纭殑鍋氭硶寰堢畝鍗曪紝閫氳繃...
绛旓細搴旇璇村涔犲墠娈碉紝闇瑕佷竴浜 nodejs 鍩虹銆傚洜涓虹幇鍦ㄥ緱鍓嶇鎶鏈兘绂讳笉寮浣跨敤 npm瀹夎鍖呮潵鍘荤鐞嗙紪璇戞祦绋嬨俷pm 鏄 nodejs 鐨勫寘绠＄悊宸ュ叿銆傚彟澶 vuejs 鑴氭墜鏋剁瓑鍛ㄨ竟鐨勫伐鍏蜂篃鏄渶瑕 npm 鍖呮潵鎿嶄綔鐨勩傛墍浠ワ紝鍋氬墠绔紝蹇呴』瑕佷簡瑙 nodejs锛岄噸鐐规槸 npm 鐨勫畨瑁呫佷娇鐢ㄣ
绛旓細Introduce 鍦ㄥ紑鍙戞ā寮忕殑鏃跺欙紝鎴戜滑甯哥敤 nodemon 鍜 webpack 鐑洿鏂nodejs椤圭洰锛堝express锛夊拰鍓嶇椤圭洰锛堝vue锛夛紝浣嗛渶瑕閮ㄧ讲鐨勬椂鍊欐垜浠氨涓嶈兘鍐嶇敤寮鍙戠幆澧冪殑閰嶇疆浜嗭紝闇瑕佹敼鎴愮敓浜х幆澧冮厤缃備负浜嗕娇寰楅」鐩彲浠ョǔ鍋ョ殑杩愯鍦ㄦ湇鍔＄锛宯ode鍙互浣跨敤nohup鍚姩锛屽墠绔」鐩彲浠ヤ娇鐢╪ginx浠ｇ悊銆 浣嗘槸涓轰簡鏇村姞瑙勮寖绠＄悊...
绛旓細涓嶈兘銆vue2娴忚鍣ㄦ槸涓涓狫s妗嗘灦锛屾湁绠鍖朌om鎿嶄綔锛屽搷搴斿紡鐨勬暟鎹┍鍔紝椤甸潰浼氭牴鎹暟鎹嚜鍔ㄧ敓鎴愶紝瀹冩槸涓嶈兘浣跨敤浜nodejs涓媜s妯″潡鐨勩侼ode.js鏄竴涓鍩轰簬ChromeV8寮曟搸鐨凧avaScript杩愯鐜锛孨ode.js浣跨敤浜嗕竴涓簨浠堕┍鍔ㄣ侀潪闃诲寮廔/O鐨勬ā鍨嬨
