VUE CLI 4.x 修改默认端口

最新推荐文章于 2024-07-26 11:07:54 发布
原创 最新推荐文章于 2024-07-26 11:07:54 发布 · 1.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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

修改位置

@vue/cli 4.4.1

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

需要修改的文件：serve.js

在这里插入图片描述

修改如下

在这里插入图片描述

Vue安装（基于vue-cli 3.x可视化安装）
大大橘子的博客
07-30 4221
什么是Vue？ 首先了解一下Vue，这里引用官方的介绍： Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
@vue/cli4.x版本的vue.config.js常用配置
winne雪
03-11 9937
设置访问端口号、访问IP地址、路径别名 const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { lintOnSave: 'error', // 设置eslint报错时停止代码编译 productionSourceMap: f...
Vue CLI 4 修改端口
weixin_45444673的博客
04-30 645
注意我的版本是vue/cli 4.5 不同版本配置方法可能不同。 在根目录下创建vue.config.js module.exports = { devServer: { port: 8001 } } 重启搞定。
超详细关于vue项目vue-cli-service启动报错失败的问题
热门推荐
孙怼怼的博客
07-26 1万+
超详细关于vue项目vue-cli-service启动报错失败解决方案
vue-cli项目修改端口号
蒋劲豪的博客
06-28 687
【代码】vue-cli项目修改端口号。
vue-cli3.0修改端口号
小豆的博客
10-08 6769
package.json文件下修改 --port "scripts": { "serve": "vue-cli-service serve --port 9001", } vue.config.js文件下修改 module.exports = { devServer: { port: 9001 } }
vue如何改修端口号
weixin_44594219的博客
09-05 9079
总结了cli3和cli2创建的vue项目如何修改项目运行后的端口号
vue-cli 3.x 修改dist路径的方法
10-17
首先，Vue CLI 3.x版本构建后的项目结构更为简洁，因为一些旧版本中的配置文件夹，如build和config，已经不在默认的项目结构中出现。如果用户需要进行自定义配置，需要在项目的根目录创建一个Vue.config.js文件。这...
Vue-cli3项目配置Vue.config.js实战记录
10-18
Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，用于快速搭建 Vue.js 项目。相比之前的版本，Vue CLI 3 在项目...记住，每次修改 `vue.config.js` 后，需要重新运行 `npm run serve` 或 `yarn serve` 命令以应用更改。
vue-cli.zip
04-14
3. `vue.config.js`：Vue CLI 的配置文件，可以在这里自定义项目配置，比如修改端口号、设置公共路径等。 4. `package.json`：项目依赖和脚本的配置文件，包括开发依赖和生产依赖，以及自定义的 npm 脚本。 5. `....
Vue-CLI 4.x 自动部署项目至服务器
04-01
使用 scp2+cross-env 自动化上传部署 scp2是一个基于ssh2增强实现，纯粹使用JavaScript编写。 而ssh2就是一个使用nodejs对于SSH2的模拟实现。scp，是secure copy的缩写, scp是Linux系统下基于SSH登陆进行安全的远程文件拷贝命令。这里我们就用这个功能，在Vue编译构建成功之后，将项目推送至测试/生产环境，以方便测试，提高效率。
Vue项目启动出现的问题及解决方法
Daisy_ls的博客
10-09 8310
Please make sure you have the correct access rights---------------------请确保您有正确的访问权限。and the repository exists.--------------------并且存储库已经存在。An unknown git error occurred---------------发生未知的git错误。code 128 -----------错误码128。
Vue 修改端口号
fzy_1939的博客
08-04 1万+
本章主要介绍Vue开发环境修改端口号的几种实现方法，分享给大家，也给大家做一个参考
vue-cli4改端口
qq_43738982的博客
03-22 3577
可能原因1：新版本的portfinder有问题，需安装：npm install portfinder@1.0.21。 可能原因2：端口被占用，或者防火墙没关。 如何查看端口号被占用情况：https://jingyan.baidu.com/article/597a06431ecac3312a524351.html vue-cli自定义端口无效解法：https://www.jianshu.com/p/...
vue.4.0 修改默认的端口号
这天有点热的博客
11-25 4800
网络上大部分是在config文件夹下，index.js 里面有个dev 里面的port。类似于这个链接。https://www.cnblogs.com/atjinna/p/6907369.html 但我的项目结构中就没有config文件夹呀。找了半天终于被我找到了。 https://blog.csdn.net/godelgnis/article/details/88745343 路径为 ...
vue-cli 3.4版本的vue项目,修改运行端口号，适用于新的vue目录结构
godelgnis的博客
03-22 5423
我用3.4版本的vue-cli构建了一个vue项目，然后我想修改项目运行之后的访问端口 在网上查了一下，很多都是2.0+的版本，查来查去都说是什么在 config目录下index.js文件中修改端口号。。。。。。。 都抄来抄去的 新的vue项目目录结构下并没有config文件夹 只好自己找，我们先运行项目 发现项目运行了这样的一个命令 百度一下,进入官网 ...
修改vue/cli项目中的端口号
weixin_45343326的博客
07-03 5467
在同等级的package.json目录下，创建一个vue.config.js文件，然后在在文件内修改创建一个JSON如下图所示
vue-cli更换端口号
胡世林的博客
07-15 4015
vue-cli 更换端口号
vue-cli（4.0.5版）设置自定义端口号无效（portfinder.basePort）
qq_38969618的博客
10-26 2214
可能原因1：新版本的portfinder有问题，需安装：npm install portfinder@1.0.21。 可能原因2：端口被占用，或者防火墙没关。 如何查看端口号被占用情况：https://jingyan.baidu.com/article/597a06431ecac3312a524351.html vue-cli自定义端口无效解法：https://www.jianshu.com...
vuecli 5.x开发vue.config.js使用的是require cjs,但是为什么在main.js中可以使用import导入,package.json也没有配置type: module
最新发布
05-20
在 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、付费专栏及课程。

余额充值