When running the command `npm run prod`, production mode is not activated in Vue.js

Currently, I am working on a project that involves Laravel and Vuejs. As part of the process, I tried to publish my website, but I keep encountering this particular message in the browser console.

The message states that Vue is currently running in development mode, and it recommends switching to production mode when deploying for production. For additional tips, check out https://vuejs.org/guide/deployment.html

Despite running npm run prod and clearing the cache on my Chrome browser, I am still faced with the same message. Here is a snippet from my webpack.mix.js:

const mix = require('laravel-mix');

module.exports = {
    mode: 'production',
    resolve: {
        alias: {
            vue: process.env.NODE_ENV == 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
        }
    }
}

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Here is an excerpt from my package.json:

 "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"

Upon executing npm run prod, I received the following output:

> @ prod /var/www/html/clash
> npm run production


> @ production /var/www/html/clash
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-    progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

Browserslist: caniuse-lite is outdated. Please run next command `npm update`

(Compiled successfully message...)

Despite following these steps, I am still confronted with the same error message. What could be the problem here?

Answer №1

With a stroke of genius, I managed to figure out the solution. Here was the culprit in my layout blade template:

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

:facepalm:

Apologies for the momentary lapse in intelligence.

Answer №2

If you're facing a similar issue, the solution I found was to update the code from:

window.Vue = require('vue/dist/vue');

to:

window.Vue = require('vue/dist/vue.min');

Just to clarify, I'm currently working with Vue version 2.6.4

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

Encountering issues with npm-adduser when trying to input credentials for npm account

After developing an npm package on one machine, I cloned it to a different machine and encountered an error when trying to run npm publish: npm ERR! need auth auth and email required for publishing npm ERR! need auth You need to authorize this machine usi ...

Finding an element in the DOM using the contains method with case insensitivity is proving to be a challenge, as lower-case() XPATH 2.0 does not seem to be effective in this

Given the following element : <div class="block-level-tooltip color_title ellipsis-tooltip" title="RATE">RED Infinity 25 Rate</div> I am attempting to create an xpath selector that is not case sensitive to the title attribu ...

When the canvasJS range column chart is below the horizontal axis, modify the color and width of the bars

For each day of the week, there are records of fuel consumed and refilled. I envisioned representing this data in a range column chart using CanvasJS library. The unique aspect is that the color and width of the bars should change dynamically based on thei ...

What is the best way to keep a bootstrap navbar fixed at the top when scrolling? (It's a bit tricky)

Check out this image of my website header. HERE Is there a way to achieve a smooth scrolling effect for the blue navbar as I scroll down the page? (Specifically just the navbar, excluding the logo and social media elements). Using position:fixed; does ...

Unlocking the WiFi Security Key and Accessing Connected Devices with Javascript

When utilizing the command line netsh wlan show interfaces, it displays various information. However, I am specifically interested in extracting the data Profile : 3MobileWiFi-3D71. My goal is to retrieve only the content after the : so that ...

Accessing the selected value from a dropdown list filled with data from a PHP array in HTML

My HTML and PHP code consists of a select dropdown that looks like this: <select name="category" id="_category" class="_cateogry" onchange="submitTheForm() > option value="">Please select</option> <?php foreach ($categories as $cont ...

Webpack: Failure to Locate Node Modules

Today while working with webpack, I encountered an issue where it was unable to resolve common node modules like fs and inspect. Upon investigating, I came across a helpful solution on GitHub which suggested setting the modules to none through webpack&apos ...

Ways to avoid extra function loads in JavaScript

I'm currently working on an instant search feature and have some code implemented: $(function() { var timer; $("#searchterm").on('keypress',function() { timer && clearTimeout(timer); timer = setTimeout(doStuff, 800); tim ...

Is there a way to prevent a page from rendering until the necessary data is retrieved?

I am facing an issue where my page is attempting to render before the data is available. I have used async/await in my code, but I keep getting an error saying that the data is undefined. Interestingly, when I comment out the page elements and check the Re ...

What is the best method for inserting a URL link using jQuery within a CSS element?

Check out this code snippet: <span class='maincaptionsmall'> Test </span> Due to certain ajax and jquery scripts on my page, I am unable to use HREF as a link. In other words, the following code won't work: <span class=&ap ...

Instructions on how to retrieve a JSON file from an external source

I'm experiencing difficulties in downloading a json file from an external URL using nodejs. The issue arises when the downloaded file (dumpFile.json) is created empty. var file = fs.createWriteStream("download/dumpFile.json"); let URL = 'http:// ...

Recreated using CSS and JavaScript: iOS "Background Open" Animation

I am currently seeking a method to replicate the iOS Safari animation that occurs when opening a link in the background (the item jumps up and quickly animates to where it can be accessed) - This same animation is also seen on OSX Safari's "save to re ...

React Bootstrap encountered rendering issues

Recently, I decided to delve into the world of React Bootstrap and started my learning journey. To get started, I followed some tutorials on <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="vi ...

Next.js API is failing to retrieve images, resulting in a 500 error code

I am currently working on fetching data from a Laravel server to a NextJs API server. While the data for attributes like title is being retrieved properly, I am encountering an issue with fetching the image. It returns an error 500 and 'ECONNREFUSED&a ...

Troubleshooting the issue with Vue 3 props not being updated

In my parent component, the structure is as follows: <template> <button @click="initStr" value="init str" /> <child :str="str" /> </template> <script> export default { components: { child, } ...

Functionality of multiple sliders

Is there a more efficient way to handle the fading in and out of sections on a slider? I currently have separate functions for each section, but I'd like to simplify it so that I only need one function for all 100 sections. Any suggestions? $(&apos ...

Creating distinct identifiers for CSS JQ models within a PHP loop

Can anyone assist me in assigning unique identifiers to each model created by the loop? I am currently looping through a custom post type to generate content based on existing posts. I would like to display full content in pop-up modals when "read more" i ...

What is the rationale behind having getters and mutations accept state, while actions accept context as their first argument in VUEX

Can you explain the reasoning behind getters and mutations accepting state as their first argument, while actions accept context? And how does this reflect the difference between the two, especially considering that context contains all properties of the ...

The accuracy of the fromPointToLatLng function in Google Map's JS API seems to be inconsistent with the actual events

My objective is to enhance user experience with a drawing tool on the map interface. I aim for a functionality where, upon single-clicking somewhere on the map using tools like the rectangle tool, the map automatically centers on that clicked location. Thi ...

Prevent event bubbling when clicking

I have a code snippet that I'm struggling with. <p>haha</p> <button class="btn btn-light" onclick="nextSibling.classList.toggle('d-none');"> <i class="fa fa-ellipsis-h"></i> </button> <div class= ...