公司做web開發(fā)時要注意的問題,建站文章
導讀:建站文章建站文章1,如何修改環(huán)境變量 NODE_ENV? 背景:在項目中,設置 3 個 NODE_ENV 的值,來對應不同的版本。 development,本地開發(fā);relea網(wǎng)站技術支持網(wǎng)站搭建教程。
1,如何修改環(huán)境變量 NODE_ENV?
背景:在項目中,設置 3 個 NODE_ENV 的值,來對應不同的版本。
development,本地開發(fā);release,預發(fā)布版本;production,線上版本。
其中,預發(fā)布版本比 production 版本,多出 vconsole。
// package.json
"scripts": {
"buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",
"startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
},
打印 process.env.NODE_ENV 依舊是:production。
在 backpack 的源碼中,找到了答案:
在執(zhí)行 backpack build 命令時,會把 process.env.NODE_ENV 修改為 production,并且是寫死的不可配置的...... (重寫 backpack,恩~)注意:lerna 來管理還是一個值得關注的工具.無奈下,只能在 process.env 下,添加 __ENV 屬性,代表 NODE_ENV
640?wx_fmt=png
這時,在頁面中打印出來的信息 process.env.__ENV undefined,但是可以打印出 process.env.NODE_ENV。
可以通過配置 nuxt.config.js 中的,env 屬性,解決該問題:
env: {
__ENV: process.env.__ENV
2.inline-block總會有間隙
北京網(wǎng)站建設的程序員在做布局的時候經(jīng)常會有對齊的需要,inline可以用來對齊行級元素,而如果要對齊塊級元素就要用到inline-block了,但是用了inline-block會發(fā)現(xiàn)的確對齊了,但是塊與塊之間總會有間隙,這是因為內聯(lián)及內聯(lián)塊元素之間在HTML中寫的換行或者空格會被解析,那么怎么解決這個問題呢?一種方法是不寫換行或空格,就是把標簽全放在一起,不過這樣擠在一塊不利于讀代碼。還有就是在父元素里把font-size設置為0px,這樣就算有空格也會被解析為0的大小,也就消除了空格了。
3.position:absolute位置到底相對于誰?
前端布局有的時候需要精確控制元素位置,比如讓元素居中,常用的對于塊級元素居中方法是
margin:0
auto;
position:absolute; left:50%; margin-left:-'元素寬度';(一開始不知道m(xù)argin還可以為負,這樣用感覺很妙)
但是用絕對定位的時候總是會有莫名奇妙的問題,有的時候位置是相對于body,有的時候只是相對于父級,到底相對于誰呢?
總結下,absolute的定位應該是相對于同樣使用了absolute的父元素,如果沒有這樣的父元素那就是相對于整個body,所以如果要用absolute又要相對于父元素調整位置,那么只需要給父元素也加上一個absolute就可以了,(而且如果只設置樣式position:absolute;不設置top和left等定位屬性,那么元素的位置仍然是原來的位置,如果設置了left而不設置top,那么元素的left應該遵循上面的規(guī)則,而top位置還是在原地,總而言之就是,絕對定位的元素不設置水平邊距或者垂直邊距的時候,位置仍然是原來的水平位置或者垂直位置。)
4.webpack打包圖片資源路徑問題
使用webpack打包的時候,對于圖片資源需要用url-loader處理,否則打包過后的路徑仍然是相對于原來文件的而對于js中url應該用require引用,否則不會被webpack打包,我就是在這被坑的,打包幾遍都沒用
5.float導致塊坍塌
前端布局對齊也可以使用float,但是這樣做會導致被作用塊不占高度(相當于不存在,脫離了文檔流,但是會顯示),前面的塊不占高度后面跟著的不需要對齊的塊就可能會和前面的塊擠在一起(各種異常),float很好用,但是怎么才能避免塊坍塌呢?在結束float的塊后面加一個寬高都為0的塊,并設置樣式為clear:both;就像在浮動不占空間的塊下面加了一個隔板(我也不知道怎么解釋,但是很管用)在使用float的塊的父級塊中設置樣式overflow:hidden;這個樣式的意思是超出父級元素大小的部分不顯示,能夠解決坍塌可能是因為float塊寬度原因。使用after偽對象,這個沒用過,但是感覺原理就和第一個一樣。
web開發(fā)前段的構建問題;
聲明: 本文由我的SEOUC技術文章主頁發(fā)布于:2023-08-06 ,文章公司做web開發(fā)時要注意的問題,建站文章主要講述時要,注意,web網(wǎng)站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_36161.html