how to compile laravel vite and vue js code

user_17505634 0
Viewed 953

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
)
vite laravel vue.js php
2 Answers

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.

user_165090730

Assuming you configured your vite build right, you can add maybe an addition script e.g:

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