如何编译laravel vite和vue.js代码

Question

I want to know how to compile vue components with laravel vite Iknow that to compiling code with laravel mix i use npm run watch , but this current application, that i worked on it, it use laravel vite not mix. I tried to modifying code and upload it to the server, the content file change but the nothing was changed on application

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

Run

   npm run prod 

and

   npm run hot

Answer 2

As you can see in your postcode package.json

The available command for your application is

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

When you run npm run dev it will compile the code and start the development server on localhost.

npm run build will create the production build for deployment on the live server.

npm run serve will create the production build and start the server on localhost for you to preview it.

Answer 3

Assuming you configured your vite build right, you can add maybe an addition script eg:

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