如何在远程服务器运行Vite dev实现Laravel Mix的npm run watch效果

核心逻辑说明 #

Vite默认npm run dev是启动本地HMR开发服务器，你要的类似Laravel Mix watch的监听文件变更、实时输出开发环境静态产物的能力，需要用Vite的build --watch模式，同时强制构建时使用开发环境，保证Vue Devtools可用。

第一步：修改vite.config.js #

调整后的完整配置如下：

const { resolve } = require('path');
import vue from '@vitejs/plugin-vue';

export default ({ command, mode }) => ({
    base: '/dist/',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    build: {
        // 开启sourcemap，支持调试和Vue Devtools识别
        sourcemap: true,
        manifest: true,
        outDir: resolve(__dirname, 'public/dist'),
        rollupOptions: {
            input: 'resources/js/app.js',
        },
        // 开发模式下开启文件监听，变更后自动重新构建
        watch: mode === 'development' ? {} : null,
    },

    server: {
        host: true,
        port: '8080',
        hot: true
    },

    plugins: [vue()],

    resolve: {
        alias: {
            '@': resolve('./resources/js'),
        },
    },
});

第二步：修改package.json的scripts配置 #

如果是Windows环境，先安装cross-env统一环境变量写法：npm i -D cross-env，Linux/Mac环境可跳过该步骤。
调整后的scripts如下：

"scripts": {
    "predev": "printf \"dev\" > public/hot",
    "dev": "cross-env NODE_ENV=development vite build --mode development --watch",
    "preprod": "printf \"prod\" > public/hot",
    "prod": "vite build"
}

Linux/Mac服务器可以省略cross-env，直接写NODE_ENV=development vite build --mode development --watch即可。

效果说明 #

1. 在staging服务器运行npm run dev，会自动构建开发环境产物到public/dist目录，同时监听资源文件变更，修改后自动增量构建
2. 构建产物为开发环境版本，Vue Devtools会自动识别生效，所有开发环境调试逻辑均可正常运行
3. 完全替代原有Laravel Mix的npm run watch能力，无需暴露额外端口

内容的提问来源于stack exchange，提问作者DLK