摘要:使用開(kāi)發(fā)公眾號(hào)商城第篇記錄項(xiàng)目準(zhǔn)備搭建,寫(xiě)頁(yè)面遇到第問(wèn)題以及總結(jié),持續(xù)更新公司最近接了個(gè)商城項(xiàng)目,包括端商城微信公眾號(hào)網(wǎng)頁(yè)商城后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城,又新接觸了很多東西。
使用vue開(kāi)發(fā)公眾號(hào)商城 第1篇記錄項(xiàng)目準(zhǔn)備、搭建,寫(xiě)頁(yè)面遇到第問(wèn)題以及總結(jié),持續(xù)更新
公司最近接了個(gè)商城項(xiàng)目,包括PC端商城、微信公眾號(hào)網(wǎng)頁(yè)商城、后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城,又新接觸了很多東西。
1.搭建項(xiàng)目使用vue-cli初始化項(xiàng)目,然后就是寫(xiě)頁(yè)面,頁(yè)面通過(guò)vue-router組織,未來(lái)還會(huì)用到vuex來(lái)存儲(chǔ)一些全局的數(shù)據(jù)比如用戶(hù)信息等。
項(xiàng)目時(shí)間比較緊張,所以沒(méi)有自己做構(gòu)建(其實(shí)是不會(huì)),webpack4出來(lái)也有一段時(shí)間了,webpack3還沒(méi)搞明白,慚愧...
在寫(xiě)移動(dòng)端頁(yè)面時(shí),需要考慮移動(dòng)端適配問(wèn)題。一番百度,采用了大漠老師的《如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動(dòng)端適配》這個(gè)方案,原理是通過(guò)一些postcss插件,能把px轉(zhuǎn)換成vw,利用vw、vh單位來(lái)實(shí)現(xiàn)不同尺寸屏幕縮放。具體如何做文中已經(jīng)寫(xiě)的很詳細(xì)了。
3.UI庫(kù)UI庫(kù)使用的是有贊的基于vue的zan-ui,有贊本來(lái)就是做微信商城的,所以他們推出的ui庫(kù)特別適合移動(dòng)端商城開(kāi)發(fā)。
由于我這個(gè)項(xiàng)目有自己的ui,所以需要修改zan-ui的樣式,而且我們ui是按照iphone6的大小畫(huà)的設(shè)計(jì)稿,zanui的默認(rèn)組件大小會(huì)縮小一半。
修改zan-ui默認(rèn)樣式也很簡(jiǎn)單,可以在自己的vue組件css里覆蓋掉ui的樣式,不過(guò)記得style標(biāo)簽去掉scoped,不然修改會(huì)不生效。或者下載zan-ui源碼,修改源碼中的css文件,然后重新打包,重新引用,看個(gè)人選擇。為了省事兒我選擇前者。
來(lái)張項(xiàng)目結(jié)構(gòu)圖和package.json:
開(kāi)發(fā)vue項(xiàng)目,引用本地圖片的時(shí)候,時(shí)常糾結(jié)把圖片放在static下面好呢,還是src/assets下面好呢,引用的時(shí)候是應(yīng)該寫(xiě)絕對(duì)路徑呢,還是相對(duì)路徑呢?接下來(lái)通過(guò)測(cè)試把這塊徹底搞明白!
vue-cli新建一個(gè)測(cè)試項(xiàng)目,在static目錄下放一張圖片testimg.jpg,在src/assets目錄下也放一張圖片logo.png,在App.vue文件中用不同方式引用這兩個(gè)圖片。項(xiàng)目結(jié)構(gòu)如下:
絕對(duì)路徑引用在App.vue中通過(guò)絕對(duì)路徑引用這兩個(gè)圖片:
絕對(duì)路徑引用后,執(zhí)行npm run build打包構(gòu)建,打包后對(duì)文件結(jié)構(gòu)如下:
編譯后頁(yè)面中真實(shí)引用情況:
結(jié)論:
根據(jù)官方文檔描述,webpack在解析時(shí)是不會(huì)解析絕對(duì)路徑的。首先可以看到打包后的html中,圖片的引用路徑?jīng)]有發(fā)生變化,說(shuō)明html模版中的絕對(duì)路徑不會(huì)被解析;其次,構(gòu)建后的文件目錄中,沒(méi)有l(wèi)ogo.png圖片,js中也沒(méi)有任何base64碼,說(shuō)明通過(guò)絕對(duì)路徑引用的文件也不會(huì)被解析。而static目錄下的圖片之所以會(huì)被成功引用,是因vue-cli給我們配置了一個(gè)叫做copywebpackplugin的webpack配置項(xiàng),這個(gè)插件的作用就是在構(gòu)建時(shí)把指定目錄下的文件或目錄復(fù)制到指定的構(gòu)建目錄下,vue-cli指定了static目錄下的文件在構(gòu)建時(shí)會(huì)被復(fù)制到構(gòu)建目錄的static目錄下,這與模版中的引用路徑剛好一致,所以能夠成功引用。
在App.vue中通過(guò)相對(duì)路徑引用這兩個(gè)圖片:
執(zhí)行npm run build查看打包文件結(jié)構(gòu):
編譯后頁(yè)面中真實(shí)引用情況:
結(jié)論
通過(guò)相對(duì)路徑的引用都被解析了,可以看到html中的引用路徑不一樣了,logo.png被url-loader解析成base64碼,testimg.jpg也通過(guò)解析加了hash。static目錄下的testimg.jpg在打包時(shí)仍然被直接復(fù)制了一份,但是并沒(méi)有被引用。
通過(guò)相對(duì)路徑的引用必然會(huì)被解析;
通過(guò)絕對(duì)路徑的引用必然不會(huì)被解析;
解析與否和文件放在哪個(gè)目錄下沒(méi)有直接關(guān)系,假如我們使用絕對(duì)路徑引用static目錄下的文件,但是又沒(méi)有配置copywebpackplugin,那依然無(wú)法引用。
server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; location / { root /home/web/andersen/admin; try_files $uri $uri/ @router; index index.html index.htm; } location /mobile { alias /home/web/andersen/mobile/; try_files $uri $uri/ @router; index index.html index.htm; } location @router { rewrite ^.*$ /index.html last; } location /admin { proxy_pass http://localhost:8088; } location /api { proxy_pass https://118.24.7.46:443; } }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/40003.html
摘要:使用開(kāi)發(fā)公眾號(hào)商城第篇記錄項(xiàng)目準(zhǔn)備搭建,寫(xiě)頁(yè)面遇到第問(wèn)題以及總結(jié),持續(xù)更新公司最近接了個(gè)商城項(xiàng)目,包括端商城微信公眾號(hào)網(wǎng)頁(yè)商城后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城,又新接觸了很多東西。 使用vue開(kāi)發(fā)公眾號(hào)商城 第1篇記錄項(xiàng)目準(zhǔn)備、搭建,寫(xiě)頁(yè)面遇到第問(wèn)題以及總結(jié),持續(xù)更新 公司最近接了個(gè)商城項(xiàng)目,包括PC端商城、微信公眾號(hào)網(wǎng)頁(yè)商城、后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城,又新接觸了很...
摘要:使用開(kāi)發(fā)公眾號(hào)商城第篇記錄項(xiàng)目準(zhǔn)備搭建,寫(xiě)頁(yè)面遇到第問(wèn)題以及總結(jié),持續(xù)更新公司最近接了個(gè)商城項(xiàng)目,包括端商城微信公眾號(hào)網(wǎng)頁(yè)商城后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城,又新接觸了很多東西。 使用vue開(kāi)發(fā)公眾號(hào)商城 第1篇記錄項(xiàng)目準(zhǔn)備、搭建,寫(xiě)頁(yè)面遇到第問(wèn)題以及總結(jié),持續(xù)更新 公司最近接了個(gè)商城項(xiàng)目,包括PC端商城、微信公眾號(hào)網(wǎng)頁(yè)商城、后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城,又新接觸了很...
摘要:使用開(kāi)發(fā)公眾號(hào)商城第篇記錄項(xiàng)目準(zhǔn)備搭建,寫(xiě)頁(yè)面遇到第問(wèn)題以及總結(jié),持續(xù)更新公司最近接了個(gè)商城項(xiàng)目,包括端商城微信公眾號(hào)網(wǎng)頁(yè)商城后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城,又新接觸了很多東西。 使用vue開(kāi)發(fā)公眾號(hào)商城 第1篇記錄項(xiàng)目準(zhǔn)備、搭建,寫(xiě)頁(yè)面遇到第問(wèn)題以及總結(jié),持續(xù)更新 公司最近接了個(gè)商城項(xiàng)目,包括PC端商城、微信公眾號(hào)網(wǎng)頁(yè)商城、后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城,又新接觸了很...
摘要:前言一個(gè)集微信公眾號(hào)商城小程序商城商城后臺(tái)的一個(gè)開(kāi)源項(xiàng)目,后臺(tái)是基于開(kāi)發(fā)的,是一個(gè)簡(jiǎn)潔而強(qiáng)大的開(kāi)源微信公眾平臺(tái)開(kāi)發(fā)框架,微信功能插件化開(kāi)發(fā)多公眾號(hào)管理配置簡(jiǎn)單。微信小程序項(xiàng)目下載整個(gè)包之后,進(jìn)行根目錄文件夾。 前言 一個(gè)集微信公眾號(hào)商城/小程序商城/商城后臺(tái)的一個(gè)開(kāi)源項(xiàng)目,后臺(tái)是基于WeiPHP5.0開(kāi)發(fā)的,WeiPHP是一個(gè)簡(jiǎn)潔而強(qiáng)大的開(kāi)源微信公眾平臺(tái)開(kāi)發(fā)框架,微信功能插件化開(kāi)發(fā),多...
摘要:前言一個(gè)集微信公眾號(hào)商城小程序商城商城后臺(tái)的一個(gè)開(kāi)源項(xiàng)目,后臺(tái)是基于開(kāi)發(fā)的,是一個(gè)簡(jiǎn)潔而強(qiáng)大的開(kāi)源微信公眾平臺(tái)開(kāi)發(fā)框架,微信功能插件化開(kāi)發(fā)多公眾號(hào)管理配置簡(jiǎn)單。微信小程序項(xiàng)目下載整個(gè)包之后,進(jìn)行根目錄文件夾。 前言 一個(gè)集微信公眾號(hào)商城/小程序商城/商城后臺(tái)的一個(gè)開(kāi)源項(xiàng)目,后臺(tái)是基于WeiPHP5.0開(kāi)發(fā)的,WeiPHP是一個(gè)簡(jiǎn)潔而強(qiáng)大的開(kāi)源微信公眾平臺(tái)開(kāi)發(fā)框架,微信功能插件化開(kāi)發(fā),多...
閱讀 1310·2021-11-16 11:45
閱讀 2233·2021-11-02 14:40
閱讀 3872·2021-09-24 10:25
閱讀 3029·2019-08-30 12:45
閱讀 1255·2019-08-29 18:39
閱讀 2468·2019-08-29 12:32
閱讀 1588·2019-08-26 10:45
閱讀 1917·2019-08-23 17:01