vue项目的访问端口及其设置方式

目录
  • vue项目访问端口及设置
    • vue项目的访问端口
    • 端口变化及其设置
  • vue项目配置端口号
    • 新建 vue.config.js

vue项目访问端口及设置

vue项目的访问端口

vue项目目录下config文件夹中的index.js文件

端口变化及其设置

// can be overwritten by process.env.PORT, if port is in use, a free one will be determined

※ 如果不进行端口号修改，默认端口8080，如果端口占用，则会自动调用空闲端口。

vue项目配置端口号

新建 vue.config.js

module.exports = {
    devServer:{
        port:8080,  // 端口号的配置
        open:true   // 自动打开浏览器
    }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue开发环境中修改端口号的实现方法

    Vue开发环境中修改端口号 如上图所示,在开发环境中,8080便是端口号,这也是使用Vue脚手架创建的项目运行时的默认的端口. 1.Vue 2.x config文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可. module.exports = { dev: { env: require('./dev.env'), port: 8080, // 端口号 assetsSubDirectory: 'static', assetsPublicPath: '/', pr

  • vue插件及修改ip启动端口解析

    vue插件及修改ip启动端口解析

    目录 element-ui插件 环境搭建: jq+bs插件 一.jq环境搭建: 二.bs环境搭建: 修改ip启动端口 element-ui插件 element-ui就类似于BootStrap框架,前者是在vue项目中运用,后者是在原生项目中运用,当然也可以在vue项目中运用 环境搭建: 1)安装:在前端项目根目录下的终端cnpm install element-ui 2)配置:main.js //element-ui环境import ElementUI from 'element-ui'Vue.

  • vue如何动态配置ip与端口

    目录 vue动态配置ip与端口 动态配置IP及端口,打包后随时改随时生效 一.利用public下的文件不会被打包的原理 二.利用 generate-asset-webpack-plugin 插件 vue动态配置ip与端口 考虑一个成品的项目会给到各地方进行部署,而每个地方的ip和端口均无法保证统一,为了抽离开发人员的工作,需要对项目进行一定的配置,配置后的项目,只需要修改打包后的配置文件,填写相关的ip和端口,即可实现项目的部署. 由于vue打包后会生成static包.index文件,为了防止打

  • Vue修改项目启动端口号方法

    在项目的package.json中可以找到如下代码 start属性指定的文件就是通过开发模式启动的服务文件 "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js", "lint&quo

  • vue项目中封装echarts的优雅方式分享

    vue项目中封装echarts的优雅方式分享

    目录 场景 需求 代码总览 实现 components--chart--index.vue components--chart--index.js components--chart--options main.js chartTest index.vue index.js 代码 总结 补充 补充2:图表高亮轮询,dispatchAction使用 使用方法 附:echarts 饼图调用高亮示例 dispatchAction 补充3:封装echarts地图,姐妹篇 总结 场景 1.Echarts使

  • 如何监听Vue项目报错的4种方式 

    如何监听Vue项目报错的4种方式 

    目录 背景 onerror element.onerror errorHandler errorCaptured error传播规则(划重点) 如何监听异步错误 总结 背景 在开发Vue项目时,使用浏览器调试可以比较清晰的看到报的什么错.在哪报错,或者使用console.log()打印出报错信息,以便快速定位到报错源头并解决,但是如果项目上线了又怎么查看呢.对于上线项目来说,一般都是会有代码混淆以及禁用console.log(),这个时候再使用浏览器调试就有点不太方便了.另一种场景,如果要做一个

  • vue项目中锚点定位替代方式

    在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转.所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document.getElementById('section') if (section) { section.scrollIntoView() } } html标签中绑定click事件就可以了 以上这篇vue项目中锚点定位替代方式就是小编

  • vue项目刷新当前页面的三种方式(重载当前页面数据)

    目录 vue项目刷新当前页面的三种方式(重载当前页面数据) 一.this.$router.go(0) 二.location.reload() 三.用provide / inject 组合 PS:vue项目刷新当前页面的三种方法 vue项目刷新当前页面的三种方式(重载当前页面数据) 一.this.$router.go(0) 相当于F5刷新,这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 二.location.reload() 这种也是一样,画面一闪,体验不是很好,相

  • nginx部署vue项目,给访问路径加前缀的实现

    目录 Nginx安装与启动 Vue增加访问路径 nginx配置 总结 Nginx安装与启动 去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 start nginx 关闭命令 taskkill /f /t /im nginx.exe 改了配置文件,不需要先关闭再启动,直接重启,重启命令 nginx -s reload Vue增加访问路径 有时候会根据需要,区分不用的v

  • vue项目中轮询状态更改方式(钩子函数)

    目录 vue项目中轮询状态更改 vue轮询方法及清除 vue项目中轮询状态更改 在实际项目中,对于实时存储改变的数据,如果不是使用websoct,就需要使用到轮询,对于轮询实际是前端设置的定时器,不停存储获取数据并进行更改. 而对于退出该界面后,轮询逻辑依然在定时器的执行中进行,此时需要用到钩子函数判断路由离开状态后,进行清除定时器 //离开当前页面 beforeRouteLeave(to, from, next) { window.clearInterval(this.myInterval);

  • vue项目及axios请求获取数据方式

    目录 一.首先导入用到的组件和axios 二.在data中将要用到的数据给一个初始值,为空 三.在methods中写方法,发送axios获取数据 四.传递数据 五.封装 axios axios拦截器 一般vue项目中 一个页面是由多个组件组成的,各个组建的数据都是统一在主界面的组件中发送axios请求获取,这样极大地提高了性能. 一.首先导入用到的组件和axios import HomeHeader from './components/Header' import HomeSwiper fro

  • vue项目依赖升级报错处理方式

    目录 vue项目依赖升级报错处理 当启动vue项目安装依赖时报错 vue项目依赖升级报错处理 1.Vue Router 升级到3.5.1报错:Navigation cancelled from "/login" to "/" with a new navigation 原因:Vue Router内部报错没有进行catch处理导致的编程式导航跳转问题,往同一地址跳转时会报错,push和replace 都会导致这个情况的发生 import Vue from 'vue'

  • vue项目keepAlive配合vuex动态设置路由缓存方式

    vue项目keepAlive配合vuex动态设置路由缓存方式

    目录 需求 效果图 解决方案 1.App.vue文件 2.main.js文件 3.store/modules/common.js文件 4.utils/utils.js文件 5.store/index.js文件 6.router/index.js文件 7.routers/Home.vue文件 需求 首页 → 列表页→ 详情页(缓存列表页面 ) → 列表页(不重新加载列表页)→ 首页(清除列表页的缓存) 效果图 解决方案 直接使用keepAlive会出现一个问题,当从查询1进入列表页面,这时缓存li

  • SpringBoot项目修改访问端口和访问路径的方法

    创建SpringBoot项目,启动后,默认的访问路径即主机IP+默认端口号8080:http://localhost:8080/ 此时,我们就可以访问Controller层的接口了,如:http://localhost:8080/hello package com.springboot.test; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.a

随机推荐