【Svelte，Vite】如何修改默认端口号 5173？

当你在本地调试 Svelte 项目时，使用npm run dev，通常打开的端口是 5173。如果更改这个端口号呢？

你可以采用下面三种方法之一：

Using vite.config.js (Recommended for persistent change)
Using a Command-Line Argument (For one-off or script changes)
Using an Environment Variable (Good for CI/CD or dynamic ports)

1. Using `vite.config.js` (Recommended)

This is the most common and recommended way to set configuration for your project. If you don't have a vite.config.js (or .ts) file in your project's root, create one.

For SvelteKit Projects:

Your vite.config.js will likely already exist and look something like this:

javascript 复制代码

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()],
    server: {
        port: 3000, // <--- Add this line to set your desired port
        strictPort: true, // Optional: Exit if the port is already in use
        // host: true, // Optional: Listen on all network interfaces (0.0.0.0)
    }
});

For Plain Svelte Projects (without SvelteKit):

If you're using a plain Svelte setup with Vite (e.g., created with npm create vite@latest my-svelte-app -- --template svelte), your vite.config.js would look similar but use the vite-plugin-svelte directly:

javascript 复制代码

// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
    plugins: [svelte()],
    server: {
        port: 3000, // <--- Add this line
        strictPort: true,
    }
});

After saving vite.config.js , run npm run dev again, and it will start on the new port (e.g., localhost:3000).

2. Using a Command-Line Argument

You can directly pass the --port argument to the vite dev command.

a) Modify package.json (for persistent script change):

Open your package.json file and modify the dev script:

json 复制代码

// package.json
{
  "name": "my-svelte-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev --port 3000", // Change 3000 to your desired port
    "build": "vite build",
    "preview": "vite preview",
    // ...
  },
  // ...
}

Now, when you run npm run dev, it will use port 3000.

b) Run directly in terminal (for one-off execution):

You can also run it directly if you don't want to change package.json:

bash 复制代码

npx vite dev --port 3000

(Note: npx vite dev is the underlying command npm run dev executes for most Svelte/Vite projects)

3. Using an Environment Variable

Vite (and many other tools) often respects the PORT environment variable. This is especially useful for dynamic environments or quick temporary changes.

On Linux/macOS:

bash 复制代码

PORT=3000 npm run dev

On Windows (Command Prompt):

cmd 复制代码

set PORT=3000 && npm run dev

On Windows (PowerShell):

powershell 复制代码

$env:PORT=3000; npm run dev

Which method to choose?

vite.config.js: Best for a permanent, project-wide port setting that everyone working on the project should use.
Command-line argument in package.json : Also good for a permanent project setting, slightly less "official" than vite.config.js but effective.
Environment Variable: Ideal for local overrides without touching project files, CI/CD pipelines, or when you need to quickly test on a different port without modifying configuration.

【Svelte，Vite】如何修改默认端口号 5173？

1. Using vite.config.js (Recommended)

2. Using a Command-Line Argument

3. Using an Environment Variable

Which method to choose?

1. Using `vite.config.js` (Recommended)