如何编译laravel vite和vue js代码

Question

我想知道如何用laravel编译vue组件，我知道用laravel编译代码，我使用npm run watch，但是这个当前的应用程序，我使用它，它使用的是laravel而不是mix。我试图修改代码并将其上传到服务器，内容文件会发生更改，但应用程序中没有任何更改。

package.json

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "eslint ./resources/scripts --ext .js,.vue"
  },
  "devDependencies": {
    "@rvxlab/tailwind-plugin-ios-full-height": "^1.0.0",
    "@vitejs/plugin-vue": "^1.10.0",
    "@vue/compiler-sfc": "^3.2.22",
    "autoprefixer": "^10.2.5",
    "cross-env": "^5.1",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-vue": "^7.0.0-beta.4",
    "laravel-vite": "^0.0.7",
    "postcss": "^8.2.13",
    "prettier": "^2.3.0",
    "sass": "^1.32.12",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^2.2.7",
    "vite": "^2.6.1"
  },
  "dependencies": {
    "@headlessui/vue": "^1.4.0",
    "@heroicons/vue": "^1.0.1",
    "@popperjs/core": "^2.9.2",
    "@tailwindcss/forms": "^0.3.3",
    "@tiptap/core": "^2.0.0-beta.85",
    "@tiptap/starter-kit": "^2.0.0-beta.81",
    "@tiptap/vue-3": "^2.0.0-beta.38",
    "@vuelidate/components": "^1.1.12",
    "@vuelidate/core": "^2.0.0-alpha.32",
    "@vuelidate/validators": "^2.0.0-alpha.25",
    "@vueuse/core": "^6.0.0",
    "axios": "^0.19",
    "chart.js": "^2.7.3",
    "guid": "0.0.12",
    "lodash": "^4.17.13",
    "maska": "^1.4.6",
    "mini-svg-data-uri": "^1.3.3",
    "moment": "^2.29.1",
    "pinia": "^2.0.4",
    "postcss-inset": "^1.0.0",
    "v-money3": "^3.13.5",
    "v-tooltip": "^4.0.0-alpha.1",
    "vue": "^3.2.0-beta.5",
    "vue-flatpickr-component": "^9.0.3",
    "vue-i18n": "^9.1.7",
    "vue-router": "^4.0.8",
    "vue3-colorpicker": "^1.0.5",
    "vuedraggable": "^4.1.0"
  }
}

vite.config.ts

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

export default defineConfig({
    server: {
        watch: {
            ignored: ['**/.env/**'],
        },
    },
    resolve: {
        alias: {
            "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
        }
    }
}).withPlugins(
    vue
)

Answer 1

正如您在邮政编码package.json中所看到的

应用程序可用的命令是

"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "eslint ./resources/scripts --ext .js,.vue"

当您运行npm run dev时，它将编译代码并在本地主机上启动开发服务器。

npm run build将创建用于在活动服务器上部署的生产构建。

npm run serve将在本地主机上创建产品构建并启动服务器，供您预览。

Answer 2

假设您正确地配置了vite构建，您可以添加一个附加的script，例如：

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