vue3由vite热置换而不是在宅基地工作

Question

我是Vite的新手，我遵循脚手架-你的-第一-vite-项目

npm init @vitejs/app client --template vue

编辑默认的package.json

{
  "version": "0.0.0",
  "scripts": {
    "dev": "node_modules/vite/bin/vite.js --host 0.0.0.0 --port 3000",
    "build": "node_modules/vite/bin/vite.js build --host 0.0.0.0 --port 3000",
    "serve": "node_modules/vite/bin/vite.js preview --host 0.0.0.0 --port 3000"
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.2",
    "@vue/compiler-sfc": "^3.0.5",
    "vite": "^2.3.4"
  }
}

然后

npm install
npm run dev

一切都很好

​

但是当我更改components/HelloWorld.vue**，时什么都没有发生，热模块的替换失败了**

我检查了NODE_ENV并更改了package.json，如下所示：

"scripts": {
    "dev": "node_modules/vite/bin/vite.js cross-env NODE_ENV=development --host 0.0.0.0 --port 3000",

但是页面变成了空白，控制台出现了很多错误。

我怎样才能找出这个问题？非常感谢任何人的帮助！

Answer 1

好吧，我终于把这个修好了

1. 将@/~在import()中替换为.//../

✅ Do
import('./pages/index.vue')
❌Do not
import('@/pages/index.vue)

更多细节：https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations

1. 将usePolling传递给Vite配置中的server.watch选项

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    watch: {
      usePolling: true
    }
  }
})

更多细节：https://github.com/vitejs/vite/issues/1153#issuecomment-785467271

Answer 2

问题在于你的script

node_modules/vite/bin/vite.js cross-env NODE_ENV=development --host 0.0.0.0 --port 3000
                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

cross-env需要成为主命令，因此将其移到开头：

cross-env NODE_ENV=development node_modules/vite/bin/vite.js --host 0.0.0.0 --port 3000

但正如您所知，vite默认将NODE_ENV设置为development，因此不需要自己动手。