如何编译 laravel vite 和 vue js 代码答案

【问题标题】：how to compile laravel vite and vue js code如何编译 laravel vite 和 vue js 代码
【发布时间】：2022-01-27 07:18:37
【问题描述】：

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

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
)

【问题讨论】：

标签： php laravel vue.js vite

【解决方案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 将创建生产版本并在 localhost 上启动服务器供您预览。

【讨论】：

但我直接通过 sftp 扩展在服务器上工作，我应该添加或更改什么？
如果您的服务器足够强大，那么您可以使用终端创建构建。但我建议在本地机器上做代码和测试，然后在服务器上部署构建代码
我试过npm run build ，但它给出了一个错误：You must supply options.input to rollup

【解决方案2】：

假设您正确配置了您的 vite 构建，您可以添加可能的补充 script 例如：

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

【讨论】：