VUE CLI 4.x 修改默认端口

本文介绍如何在@vue/cli-service的node_modules目录下,找到并修改serve.js文件,以适应特定的开发需求。

修改位置

@vue/cli 4.4.1

所在目录:node_modules\@vue\cli-service\lib\commands

需要修改的文件:serve.js

在这里插入图片描述

修改如下

在这里插入图片描述

Vue CLI 5.x 中,`vue.config.js` 文件默认使用的是 CommonJS 模块规范(require/cjs),而 `main.js` 文件可以使用 ES Module 的 `import` 语法,这是因为 Vue CLI 内部对模块解析方式做了兼容处理。 ### 回答问题 #### 1. 为什么 `vue.config.js` 使用 CommonJS? `vue.config.js` 是 Vue CLI 提供的配置文件,它会被 Vue CLI 内部以 Node.js 环境的方式加载。Node.js 默认支持的是 CommonJS 模块规范,因此 `vue.config.js` 必须遵循 CommonJS 规范,使用 `module.exports` 或 `require` 来导出和引入模块。 例如: ```javascript // vue.config.js module.exports = { devServer: { port: 8080, }, }; ``` #### 2. 为什么 `main.js` 可以使用 ES Module 的 `import`? 虽然 Node.js 默认使用 CommonJS,但前端代码(如 `main.js`)通常是运行在浏览器环境中的,而不是直接运行在 Node.js 环境中。Vue CLI 在构建时会通过 Babel 或 Webpack 对代码进行转换,将 ES Module 的 `import` 转换为浏览器兼容的形式。 即使你的 `package.json` 中没有设置 `"type": "module"`,Vue CLI 的构建工具链(Webpack/Babel)仍然会自动识别并处理 `import` 语法。 #### 3. 解释 `package.json` 中的 `"type": "module"` 的作用 `"type": "module"` 是 Node.js 的一个字段,用于显式声明当前项目是基于 ES Module 的。如果没有这个字段,默认情况下 Node.js 会将 `.js` 文件视为 CommonJS 模块。 由于 `vue.config.js` 是由 Node.js 加载的,如果你设置了 `"type": "module"`,那么 `vue.config.js` 就需要使用 ES Module 的 `import`/`export` 语法。然而,这会导致一些兼容性问题,因此 Vue CLI 默认不建议在项目中设置 `"type": "module"`。 --- ### 给出代码示例 以下是一个完整的 Vue CLI 5.x 项目的配置和代码示例: #### `vue.config.js` (CommonJS) ```javascript // vue.config.js module.exports = { devServer: { port: 8080, open: true, // 自动打开浏览器 }, lintOnSave: false, // 关闭 ESLint 检查 }; ``` #### `main.js` (ES Module) ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` #### `package.json` ```json { "name": "vue-cli-example", "version": "1.0.0", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "vue": "^3.0.0" }, "devDependencies": { "@vue/cli-service": "^5.0.0" } } ``` --- ### 解释代码 1. **`vue.config.js`** - 这个文件是 Vue CLI 的配置文件,使用 CommonJS 规范。 - 配置了开发服务器端口为 `8080`,并且在启动时自动打开浏览器。 2. **`main.js`** - 这是 Vue 应用的入口文件,使用 ES Module 的 `import` 语法。 - 引入了 Vue 和根组件 `App.vue`,并通过 `createApp` 方法挂载到 DOM 上。 3. **`package.json`** - 定义了项目的依赖和脚本。 - 没有设置 `"type": "module"`,因此默认使用 CommonJS。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值