公司做web开发时要注意的问题_电脑百科

当前位置：主页 > 百科 > 电脑百科 >

公司做web开发时要注意的问题

时间：2025-07-04 来源：铿鸟百科网收集整理：小编阅读: 次

导读：1，如何修改环境变量 NODE_ENV?背景：在项目中，设置 3 个 NODE_ENV 的值，来对应不同的版本。development，本地开发；release，预发布版本；production，线上版本。其中，预发布版本比 product

1，如何修改环境变量 NODE_ENV?

背景：在项目中，设置 3 个 NODE_ENV 的值，来对应不同的版本。

development，本地开发；release，预发布版本；production，线上版本。

其中，预发布版本比 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 的源码中，找到了答案：

在执行 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总会有间隙

北京网站建设的程序员在做布局的时候经常会有对齐的需要，inline可以用来对齐行级元素，而如果要对齐块级元素就要用到inline-block了，但是用了inline-block会发现的确对齐了，但是块与块之间总会有间隙，这是因为内联及内联块元素之间在HTML中写的换行或者空格会被解析，那么怎么解决这个问题呢？一种方法是不写换行或空格,就是把标签全放在一起，不过这样挤在一块不利于读代码。还有就是在父元素里把font-size设置为0px，这样就算有空格也会被解析为0的大小，也就消除了空格了。

3.position:absolute位置到底相对于谁？

前端布局有的时候需要精确控制元素位置，比如让元素居中，常用的对于块级元素居中方法是

margin:0

auto;

position:absolute; left:50%; margin-left:-'元素宽度';(一开始不知道margin还可以为负，这样用感觉很妙)

但是用绝对定位的时候总是会有莫名奇妙的问题，有的时候位置是相对于body，有的时候只是相对于父级，到底相对于谁呢？

总结下，absolute的定位应该是相对于同样使用了absolute的父元素，如果没有这样的父元素那就是相对于整个body，所以如果要用absolute又要相对于父元素调整位置，那么只需要给父元素也加上一个absolute就可以了，（而且如果只设置样式position:absolute;不设置top和left等定位属性，那么元素的位置仍然是原来的位置，如果设置了left而不设置top，那么元素的left应该遵循上面的规则，而top位置还是在原地，总而言之就是，绝对定位的元素不设置水平边距或者垂直边距的时候，位置仍然是原来的水平位置或者垂直位置。）

4.webpack打包图片资源路径问题

使用webpack打包的时候，对于图片资源需要用url-loader处理，否则打包过后的路径仍然是相对于原来文件的而对于js中url应该用require引用，否则不会被webpack打包，我就是在这被坑的，打包几遍都没用

5.float导致块坍塌

前端布局对齐也可以使用float，但是这样做会导致被作用块不占高度(相当于不存在，脱离了文档流，但是会显示)，前面的块不占高度后面跟着的不需要对齐的块就可能会和前面的块挤在一起（各种异常），float很好用，但是怎么才能避免块坍塌呢？在结束float的块后面加一个宽高都为0的块，并设置样式为clear:both;就像在浮动不占空间的块下面加了一个隔板(我也不知道怎么解释，但是很管用)在使用float的块的父级块中设置样式overflow:hidden；这个样式的意思是超出父级元素大小的部分不显示，能够解决坍塌可能是因为float块宽度原因。使用after伪对象，这个没用过，但是感觉原理就和第一个一样。

web开发前段的构建问题；

1，如何预处理器?

背景：在组件中的 <template>、<script> 或 <style> 上使用各种预处理器

加上处理器后，控制台报错

.red

color: red

</style>

这个问题解决方法非常简单，只需要安装这些依赖就好：

npm install --save-dev node-sass sass-loader

但是解决过程并不是很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操作，发现不能成功，最后发现了该解决方案。

中文文档的版本号过低，如需查看文档，一定要看最新版本的英文文档！

2，如何添加 vue plugin?

背景：封装了一个 toast vue plugin

由于 vue 实例化的过程没有暴露出来，在哪个时机注入进去呢？

可以在 nuxt.config.js 中添加 plugins 配置，这样插件就会在 Nuxt.js 应用初始化之前被加载导入。

module.exports = {

plugins: ['~plugins/toast']

}

~plugins/toast.js 文件：

import Vue from 'vue'

import toast from '../utils/toast'

import '../assets/css/toast.css'

Vue.use(toast)

3，如何使用 px2rem?

背景：在 css 中，写入 px，通过 px2rem loader 将 px 转换成 rem

在以前的项目中，是通过 px2rem loader 实现的，但是在 Nuxt.js 项目下，添加 css loader 还是很费力的，因为涉及到 vue-loader。

想到了一个其他方案：

可以使用 postcss 处理。可以在 nuxt.config.js 文件中添加配置，也可以在postcss.conf.js 文件中添加。

build: {

postcss: [

require('postcss-px2rem')({

remUnit: 75 // 转换基本单位

})

]

4，如何拓展 webpack 配置?

背景：给 utils 目录添加 alias

刚刚说到，Nuxt.js 内置了 webpack 配置

如果要拓展配置，在 nuxt.config.js 文件中添加。

同时也可以在该文件中，将配置信息打印出来。

extend (config, ctx) {

console.log('webpack config:', config)

if (ctx.isClient) {

// 添加 alias 配置

Object.assign(config.resolve.alias, {

'utils': path.resolve(__dirname, 'utils')

})

}

5，如何在 head 里面引入 js 文件?

背景: 在 <head> 标签中，以 inline 的形式引入 flexible.js 文件

移动端项目可以引入 flexible.js 来实现移动端适配

Nuxt.js 通过 vue-meta 实现头部标签管理

通过查看文档发现，可以按照如下方式配置：

// nuxt.config.js

head: {

script: [

{

innerHTML: 'console.log("hello")',

type: 'text/javascript',

charset: 'utf-8'

}

]

}

结果，生成 html 如下:

<script

data-n-head="true"

type="text/javascript"

charset="utf-8">

console.log("hello")

</script>

发现 vue-meta 把引号做了转义处理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不会再对这些字符做转义了。

注释：该字段使用需慎重！

接下来，要把 console.log("hello") 的内容替换成 flexible.js，配置升级之后如下：

head: {

script: [

{

innerHTML: require('./assets/js/flexible'),

type: 'text/javascript',

charset: 'utf-8'

}

__dangerouslyDisableSanitizers: ['script']

}

踩坑成功，下一个坑...

铿鸟百科网

公司做web开发时要注意的问题

公司做web开发时要注意的问题

企业营销型网站建设解决方法

餐饮美食网站建设方案分析

相关阅读

win10怎么快速关闭屏幕？win10快速关闭屏幕方法

苹果iOS 17.4 Beta版开放侧载功能，但iPad不在列

极氪20万台新能源汽车里程碑达成

Win11系统intel核显控制面板怎么打开-打开intel核显控制面板的方法

Windows10玩GTA5闪退怎么解决？Windows10玩GTA5闪退解决方法

极氪第二款MPV车型“CM2E”谍照曝光，或于2024年上半年亮相