用vue開發(fā)一個(gè)公眾號(hào)商城SPA——1.前期準(zhǔn)備和寫頁(yè)面

snowLu 發(fā)布于2019-08-30 15:54 / 1790人閱讀

摘要：使用開發(fā)公眾號(hào)商城第篇記錄項(xiàng)目準(zhǔn)備搭建，寫頁(yè)面遇到第問題以及總結(jié)，持續(xù)更新公司最近接了個(gè)商城項(xiàng)目，包括端商城微信公眾號(hào)網(wǎng)頁(yè)商城后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城，又新接觸了很多東西。

使用vue開發(fā)公眾號(hào)商城 第1篇記錄項(xiàng)目準(zhǔn)備、搭建，寫頁(yè)面遇到第問題以及總結(jié)，持續(xù)更新

公司最近接了個(gè)商城項(xiàng)目，包括PC端商城、微信公眾號(hào)網(wǎng)頁(yè)商城、后臺(tái)管理系統(tǒng)。這幾天在做微信公眾號(hào)商城，又新接觸了很多東西。

1.搭建項(xiàng)目

使用vue-cli初始化項(xiàng)目，然后就是寫頁(yè)面，頁(yè)面通過vue-router組織，未來還會(huì)用到vuex來存儲(chǔ)一些全局的數(shù)據(jù)比如用戶信息等。
項(xiàng)目時(shí)間比較緊張，所以沒有自己做構(gòu)建（其實(shí)是不會(huì)），webpack4出來也有一段時(shí)間了，webpack3還沒搞明白，慚愧...

2.移動(dòng)端適配

在寫移動(dòng)端頁(yè)面時(shí)，需要考慮移動(dòng)端適配問題。一番百度，采用了大漠老師的《如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動(dòng)端適配》這個(gè)方案，原理是通過一些postcss插件，能把px轉(zhuǎn)換成vw，利用vw、vh單位來實(shí)現(xiàn)不同尺寸屏幕縮放。具體如何做文中已經(jīng)寫的很詳細(xì)了。

3.UI庫(kù)

UI庫(kù)使用的是有贊的基于vue的zan-ui，有贊本來就是做微信商城的，所以他們推出的ui庫(kù)特別適合移動(dòng)端商城開發(fā)。
由于我這個(gè)項(xiàng)目有自己的ui，所以需要修改zan-ui的樣式，而且我們ui是按照iphone6的大小畫的設(shè)計(jì)稿，zanui的默認(rèn)組件大小會(huì)縮小一半。
修改zan-ui默認(rèn)樣式也很簡(jiǎn)單，可以在自己的vue組件css里覆蓋掉ui的樣式，不過記得style標(biāo)簽去掉scoped，不然修改會(huì)不生效。或者下載zan-ui源碼，修改源碼中的css文件，然后重新打包，重新引用，看個(gè)人選擇。為了省事兒我選擇前者。
來張項(xiàng)目結(jié)構(gòu)圖和package.json：

4.在vue中正確引用靜態(tài)資源

開發(fā)vue項(xiàng)目，引用本地圖片的時(shí)候，時(shí)常糾結(jié)把圖片放在static下面好呢，還是src/assets下面好呢，引用的時(shí)候是應(yīng)該寫絕對(duì)路徑呢，還是相對(duì)路徑呢？接下來通過測(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中通過絕對(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ā)生變化，說明html模版中的絕對(duì)路徑不會(huì)被解析；其次，構(gòu)建后的文件目錄中，沒有l(wèi)ogo.png圖片，js中也沒有任何base64碼，說明通過絕對(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目錄下，這與模版中的引用路徑剛好一致，所以能夠成功引用。

相對(duì)路徑引用

在App.vue中通過相對(duì)路徑引用這兩個(gè)圖片：
執(zhí)行npm run build查看打包文件結(jié)構(gòu)：
編譯后頁(yè)面中真實(shí)引用情況：
結(jié)論
通過相對(duì)路徑的引用都被解析了，可以看到html中的引用路徑不一樣了，logo.png被url-loader解析成base64碼，testimg.jpg也通過解析加了hash。static目錄下的testimg.jpg在打包時(shí)仍然被直接復(fù)制了一份，但是并沒有被引用。

小結(jié)

通過相對(duì)路徑的引用必然會(huì)被解析；
通過絕對(duì)路徑的引用必然不會(huì)被解析；
解析與否和文件放在哪個(gè)目錄下沒有直接關(guān)系，假如我們使用絕對(duì)路徑引用static目錄下的文件，但是又沒有配置copywebpackplugin，那依然無(wú)法引用。

5.vue單頁(yè)應(yīng)用nginx部署

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;
    }
}