vite+vue3项目修改启动的端口号为localhost

简介: vite+vue3项目修改启动的端口号为localhost

目录结构



e8cbb4e6305642f49e11120ae2763636.png


找到vite.config.ts文件在里面进行修改。


需要安装几个插件


yarn add path or npm install path

yarn add process or npm install process


把原有的代码替换成以下代码即可


import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
function pathResolve(dir: string): string {
  return resolve(process.cwd(), '.', dir)
};
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': pathResolve('src')
    }
  },
  server: {
    host: '0.0.0.0', //ip地址
    port: 8080, //端口号
    open: true //启动后是否自动打开浏览器
  }
})


控制台效果


512cf63907794f0ba76915622e5d66f5.png


相关文章
|
4天前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
5天前
|
前端开发 JavaScript API
基于Vue3+Hooks实现4位随机数和60秒倒计时
本文介绍了如何在Vue3中使用Hooks API来实现生成4位随机数和执行60秒倒计时的功能,并提供了详细的代码示例和运行效果展示。
23 1
基于Vue3+Hooks实现4位随机数和60秒倒计时
|
5天前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
38 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
1天前
|
JSON JavaScript 前端开发
Vue3在工作中使用的一些经验总结
这篇文章是关于Vue 3项目中使用TypeScript的一些经验总结,包括如何配置TSLint进行代码规范和类型检查,以及如何将现有的JavaScript代码迁移到TypeScript的步骤和注意事项。
Vue3在工作中使用的一些经验总结
|
4天前
|
JavaScript 算法 API
Vue 3有哪些新特性
【8月更文挑战第16天】Vue 3有哪些新特性
25 1
|
5天前
|
JavaScript UED
如何在Vue3项目中使用防抖节流技巧
在Vue 3项目中使用防抖和节流技巧以优化组件性能,包括使用`lodash`库和自定义实现这两种方法。
10 0
如何在Vue3项目中使用防抖节流技巧
|
1天前
|
JavaScript 前端开发 API
Vue3入门
Vue3入门
4 0
|
4天前
|
JavaScript
创建 Vue3 项目
创建 Vue3 项目
11 0
|
5天前
|
JavaScript
在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件
在Vue 3和Element Plus项目中实现具有懒加载功能的el-tree树形控件,以优化大数据量时的页面性能。
14 0
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化