Vue3-修改端口号

简介: Vue3-修改端口号

方法一


图形界面中更改参数




方法二


  "scripts": {
    "serve": "vue-cli-service serve --port 80",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },


方法三


在运行项目的时候追加端口号


npm run serve -- --port 80


方法四


根目录下新建一个vue.config.js文件(和package.json同一目录) ,内容如下


module.exports = {
    devServer:{
        port:80, // 启动端口号
        open:true  // 启动后是否自动打开网页
    }
}


方法五


端口文件存放目录为:node_modules/@vue/cli-service/lib/commands/serve.js


const defaults = {
  host: '0.0.0.0',
  port: 80,
  https: false
}


优先级:方法一>方法二=方法三>方法四>方法五


如果方法二和方法三同时使用,且端口号设置不同,就会报错

相关文章
|
17天前
|
JavaScript 前端开发 索引
「Vue3系列」Vue3 条件语句/循环语句
在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令。
32 0
|
18天前
Vue3框架中让table合计居中对齐
Vue3框架中让table合计居中对齐
|
18天前
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
34 0
|
18天前
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
22 0
|
14天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
18天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
8天前
|
JavaScript 算法 前端开发
vue3和vue2的区别都有哪些
【4月更文挑战第15天】Vue3与Vue2在响应式系统(Proxy vs. Object.defineProperty)、组件模块化(Composition API vs. Options API)、数据变化检测(Reactive API vs. $watch)、虚拟DOM算法(基于迭代 vs. 基于递归)及Tree-Shaking支持上存在显著差异。Vue3的改进带来了更好的性能和灵活性,适合追求新技术的项目。Vue2则因其成熟稳定,适合维护大型项目。选择版本需根据项目需求、团队情况和技术追求来决定。
13 0
|
8天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
12 0
|
8天前
乾坤子应用配置(vue3+vite)
乾坤子应用配置(vue3+vite)
13 0
vue3中使用router路由实现跳转传参
vue3中使用router路由实现跳转传参