vite preview not work All In One

vite version 2.8 release still not work

{
  "scripts": {
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8"
  }
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    // host: '0.0.0.0',
    host: true,
    port: 8888,
  },
  plugins: [vue()]
})

solution

$ pnpm run build && pnpm run preview

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview --port=8888"
  },

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    // host: '0.0.0.0',
    // host: true,
    // port: 8888,
  },
  plugins: [vue()]
})

vite preview

https://vitejs.dev/guide/#command-line-interface

https://vitejs.dev/config/#preview-options

export default defineConfig({
  server: {
    port: 3030
  },
  preview: {
    port: 8080
  }
})

通過官方文檔發現，vite preview 實際上只是幫我們開啟了一個靜態 Web 服務器，並沒有構建項目; 💩
需要先運行 pnpm run build 后，再運行 pnpm run preview 可以正常訪問啦！

refs

https://github.com/web-fullstack/vue-3.x-advanced-tutorials-all-in-one

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 發布文章使用：只允許注冊用戶才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---