如何更改vite应用端口

发布于 2025-01-19 09:27:56 字数 158 浏览 0 评论 0原文

如果您正在更改VITE应用程序端口，请按照该步骤进行操作。

"scripts": {
  "dev": "vite --port 3006",
  "build": "vite build",
  "preview": "vite preview"
}

原文

If you are change the vite application port please follow the procedure.

"scripts": {
  "dev": "vite --port 3006",
  "build": "vite build",
  "preview": "vite preview"
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恋竹姑娘 2025-01-26 09:27:56

尝试将您的端口添加到vite.config.ts：

 export default defineConfig({
  // ...some configs
  server: {
    port: 3006,
  },
});

Try add your port into vite.config.ts:

 export default defineConfig({
  // ...some configs
  server: {
    port: 3006,
  },
});

回复收藏 0 原文

↘人皮目录ツ 2025-01-26 09:27:56

您可以修改package.json文件中的dev脚本并将--port设置为您想要的。

回复收藏 0 原文

咿呀咿呀哟 2025-01-26 09:27:56

在 vite.config.ts 中，您可以单独管理生产和开发的端口。 PORT服务器：生产。 PORT 预览：开发

export default defineConfig({
//change port for production
  preview: {
    port: 3001,
  },
// for dev
  server: {
    port: 3000,
  },
});

in vite.config.ts you can manage the port separately for production and development. PORT server: production. PORT preview: development

export default defineConfig({
//change port for production
  preview: {
    port: 3001,
  },
// for dev
  server: {
    port: 3000,
  },
});

回复收藏 0 原文

娇女薄笑 2025-01-26 09:27:56

除在config 或在命令行上提供它，也可以在.env文件中配置端口 - .env/.env中的任何内容。 .ts使用loadenv的文件：

import react from '@vitejs/plugin-react';
import { ConfigEnv, defineConfig, loadEnv } from 'vite';

export default defineConfig(({command, mode} : ConfigEnv) => {
    console.log(`configuring vite with command: ${command}, mode: ${mode}`);
    // suppress eslint warning that process isn't defined (it is)
    // eslint-disable-next-line
    const cwd = process.cwd();
    console.log(`loading envs from ${cwd} ...`);
    const env = {...loadEnv(mode, cwd, 'VITE_')};
    console.log(`loaded env: ${JSON.stringify(env)}`);

    // reusable config for both server and preview
    const serverConfig = {
        host: true,
        port: Number(env.VITE_PORT),
        strictPort: true,
    };

    return {
        base: '/',
        plugins: [react()],
        preview: serverConfig,
        server: serverConfig,
    };
});

In addition to defining it in the config or providing it on the command line, it's also possible to configure the port in .env files - anything in .env / .env.production etc that's prefixed with VITE_ will be automatically available to your app via import.meta.env and can be loaded into the vite.config.ts file using loadEnv:

import react from '@vitejs/plugin-react';
import { ConfigEnv, defineConfig, loadEnv } from 'vite';

export default defineConfig(({command, mode} : ConfigEnv) => {
    console.log(`configuring vite with command: ${command}, mode: ${mode}`);
    // suppress eslint warning that process isn't defined (it is)
    // eslint-disable-next-line
    const cwd = process.cwd();
    console.log(`loading envs from ${cwd} ...`);
    const env = {...loadEnv(mode, cwd, 'VITE_')};
    console.log(`loaded env: ${JSON.stringify(env)}`);

    // reusable config for both server and preview
    const serverConfig = {
        host: true,
        port: Number(env.VITE_PORT),
        strictPort: true,
    };

    return {
        base: '/',
        plugins: [react()],
        preview: serverConfig,
        server: serverConfig,
    };
});

回复收藏 0 原文

~没有更多了~