Facing difficulties with the 'serve' command in my Vue.js project

When working with Laravel and Vue.js, I encountered an error when trying to start Vue.js using the command npm run serve. The error displayed in my CMD is as follows:

npm ERR! Missing script: "serve"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run

How can I resolve this issue?

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.24.0",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.39",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.14"
    },
    "dependencies": {
        "vue": "^2.6.14",
        "vue-axios": "^3.3.7",
        "vue-router": "^3.5.2",
        "vue-sweetalert2": "^5.0.2"
    }
}
javascriptlaravelvue.js

Answer №1

Vue JS is not the only technology being utilized here. You are integrating Vue with Laravel.

To create a production build, remember to execute npm run prod. If you are working locally, opt for npm run watch. This will enable hot reload, detecting file changes and compiling them accordingly.

Note: Make sure to include resource JavaScript & CSS files in webpack.mix.js and specify the destination for compiled files in the public folder.

No need to use npm run serve when using Vue JS within Laravel.

Answer №2

Ensure that the following content is present in your package.json. If it's not there, add it and then proceed with running the necessary commands:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    // other commands
  },

Edit:

If you are using cmd in Windows.

Follow these steps:

  1. Delete the node_modules folder and run npm i from the cmd.

  2. Try running npm run serve again to see if it works properly this time.

  3. If the above steps don't work, install vue/cli service globally by executing npm install @vue/cli-service -g, then follow steps 1 and 2 sequentially.

Answer №3

After following all the necessary steps, I encountered an issue when trying to run "npm run serve". The error message displayed was:

PS C:\WINDOWS\System32\WindowsPowerShell\v1.0> npm run serve
npm ERR! Missing script: "serve"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

Frustrated by this error, I tried to troubleshoot further and found the complete log of this run in the following directory:

C:\Users\Make Users\AppData\Local\npm-cache_logs\2023-01-23T15_13_24_934Z-debug-0.log

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Synchronized schedule expiration on Basic Schema

Having some trouble configuring a cron job using the percolate:synced-cron package to expire collection entries based on simple schema date and time fields. Wondering if there is an alternative approach or if something is incorrect in my setup? Encounteri ...

javascriptmongodbmeteorcronsimple-schema

Node.js: Enhancing Security by Sanitizing API Requests with Failed Input Validation for Future Review

I am looking for a way to sanitize failed api requests that did not pass input validation for future security audits. The data is currently in json format and needs to remain that way. Here is an example of valid json that cannot be logged to our system a ...

javascriptnode.jsjsonsecuritylambda

Troubleshooting a function call error within $root.on method in a Vue application

I am facing an issue where I need to trigger a method when the value of a dropdown changes. The dropdown is located in a different component than where the method needs to be called, so I am using $root to achieve this functionality. Trading.vue <v-aut ...

vue.jsvue-component

Disappearing act: Nuxt Middleware makes httpOnly cookies vanish after page reload

Hey there! I'm looking to securely save a JWT token in an HttpOnly cookie that is received from a Django backend upon successful login. Everything was running smoothly until I decided to add the HttpOnly flag in the Pinia store. Any suggestions on ho ...

vue.jsauthenticationmiddlewarenuxt3.js

Can you explain the process of accessing data from [[PromiseValue]] while utilizing React hooks?

My current challenge involves fetching data from an API and utilizing it in various components through the Context API. The issue arises when I receive a response, but it's wrapped under a Promise.[[PromiseValue]]. How can I properly fetch this data ...

javascriptreactjsnext.js

Retrieve or update the selected option value in a Select2 multiple dropdown

I'm currently using Select2 for multiselect on an input field. My goal is to identify which choice has been clicked, but when I inspect the event triggered upon clicking a choice ("choice-selected"), all I see is event.target.value which contains the ...

javascriptjqueryjquery-select2

Obtain the present checkbox value selected by utilizing jQuery

I am facing an issue where the code I have written is fetching all selected values from checkboxes in a table, but I only need the value of the selected row. Here is the code snippet I am using: $.each($('input[type="checkbox"]:checked').close ...

javascriptjquery

Trigger a function when <a> is clicked, which will then increment the count by one and reflect this change in the database

The database generates the content of this div ordered by a count number called "cts". Whenever I click on the div, I want the "cts" number to increase by one, and then update the change in the database. This will result in the content changing accordingly ...

javascriptphpajaxdatabase

What causes webpack to require 4 seconds for compiling a barebones react / redux project?

I am troubled by the fact that it is still compiling my node_modules even though I have specifically excluded it. How can I investigate and understand what exactly is happening? The output in the console seems like random characters. Is there a way to conf ...

javascriptreactjsnpmwebpackredux

When using jQuery, the .change() function will only be triggered after the user clicks a button or

Looking for assistance with an unusual issue in my JavaScript/jQuery code. The jQuery .change() function on a simple text input element only triggers when I click somewhere on the page, open the Chrome console, or press a key on the keyboard. It doesn&apo ...

javascriptjquery

How can I ensure my game or website fits perfectly on the screen without any need

I have recently developed a fun Erase-A-Man game that is optimized for mobile devices. However, I am facing an issue where users need to scroll to view all the letters on their screens. My goal is to make the game fit perfectly on all phone screen sizes so ...

javascriptjqueryhtmljquery-mobile

Rendering a page using React and NextJS with server-side rendering to retrieve and showcase dynamic data

At the moment, I am utilizing client-side rendering on a page that fetches data via an API and then presents this raw data. 'use client' import React, { useState, useEffect } from 'react' import axios from 'axios'; const Sol ...

javascriptreactjsnode.jsnext.jsweb-applications

Proper method of executing multiple asynchronous actions in Redux

I'm interested in the best approach to dispatching multiple async actions of similar types. On my homepage, I have four different <Thumbnail /> components. Each <Thumbnail /> component displays a list of movies. For example, the first on ...

javascriptreactjsredux

Ensuring all ajax calls have completed before proceeding using selenium webdriverjs

In my attempt to create a function that can wait for all active (jQuery) ajax calls to complete in a Selenium WebdriverJS test environment, I am faced with challenges. My current approach involves integrating the following components: Implementing WebDri ...

javascriptjqueryajaxseleniumselenium-webdriver

The ion-slide-box does not update after the active-slide has been changed using $index

I'm currently facing an issue with the controller that corresponds to this specific view. .controller('MenuCtrl', ['$rootScope','$scope','$state','$timeout','$ionicSlideBoxDelegate', functio ...

javascriptangularjsangularjs-directiveionic-framework

The confusion surrounding navigation in Angular's single-page applications

I'm struggling to grasp how Angular handles routing in my single-page application. Here's my issue: When I type in the url: localhost:3000/streams/ I expect the 'streams' page to load. My understanding was this: My express serve ...

javascriptangularjsexpresssingle-page-application

Attempting to clear out a bootstrap-select element and refill it with new options

I've been attempting to clear all the values in a multiselect selectpicker from bootstrap-select, but unfortunately, no matter what method I try, it doesn't seem to work. I attempted to follow the examples provided for the remove method in the m ...

javascripthtmlbootstrap-5bootstrap-selectbootstrap-selectpicker

Suggestions for ASP.NET Dialog Boxes

Exploring the world of dialog boxes in ASP.NET has been quite intriguing. The way they function in Web-based applications is definitely different from what I've experienced in Windows applications. Currently, I have an ASP.NET form with its own submi ...

c#javascriptjqueryasp.netjquery-ui

Is it possible to verify with Jest that ReactDOM.render has been called if it's enclosed in a conditional statement?

I have a React component that conditionally calls ReactDOM.render when root === true to satisfy flow: import React from 'react' import ReactDOM from 'react-dom' import App from './App' const root = document.getElementById(& ...

javascriptreactjsjestjs

The sluggish loading time is a result of the checkboxes slowing down the page

I am currently working on a .aspx webpage that needs to display around 500 records from the database along with a checkbox for each record. The issue I am facing is that the page takes up to 15 seconds to fully render. To investigate this, I added a stopw ...

javascriptjqueryasp.netcheckbox