vite+vue构建前端项目时本机ip启动

初级码农-

于 2024-09-20 17:08:19 发布

阅读量439

点赞数 4

分类专栏： vite 文章标签：网络协议前端 vue

本文链接：https://blog.csdn.net/weixin_41838325/article/details/142390359

版权

vite 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在使用vue3+vite构建前端项目时，默认启动为 http://localhost:5173/导致同事无法在本地访问项目，故修改为本机ip+端口进行访问

1. vite.config中添加以下代码：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    server: {
      port: 8090, // 启动端口
      host: '0.0.0.0'
    }
  }
})

主要修改项为：

server: {
  port: 8090, // 启动端口
  host: '0.0.0.0' 
}
// host: '0.0.0.0' 会让 Vite 监听所有本地网络接口，从而使得项目可以通过本机 IP 访问

2. 如果有dev.development需要一并修改

VITE_NODE_ENV="development"
VITE_APP_BASE_URL="http://192.168.10.10:8090"

3. 修改package.json启动文件

"scripts": {
    "dev": "vite --host --port 8090",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  // 重点在于"dev": "vite --host --port 8090",,添加--host和 --port 8090