Vue app not working with production build but works well with development - vue.js

I am making an application and what I found is, my web app is working fine when I am using https://vuejs.org/js/vue.js (Development Version) but not working with https://vuejs.org/js/vue.min.js (Production Version).
Error:
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
How Can I get this issue resolved?

You got this error since you have not set production mode for your project. I guess this is first time you build webapp.
Assume that you are using node + vue + npm.
Here is solution:
you should have something like config folder to have dev.js and production.js for example.
then you will pick what file u will using base on process.env.NODE_ENV. NODE_ENV is a variable that u pass on your script at package.json or your terminal.
In production.js you have to set mode: 'production'
Whenever use deploy by CI(pipeline) or manually. You should run the script maybe like this build:production: node YOUR_CUSTOM_SCRIPT NODE_ENV=production
note: YOUR_CUSTOM_SCRIPT maybe webpack or any script that you need to build your app.
Ref: Production mode in vuejs

Related

Do I have to rebuild my frontend for production every time I edit it? I'm using Vue

Basically what I have is my frontend (Vue) and my backend (Node.js and etc.). By following a guide, I've built the frontend for production using npm run build. I got a bunch of files in a build folder I setup within a previous step. These files were then moved to a folder in the backend. It works, but it's more a demo than anything else, and the frontend and backend will have to be modified more as I continue.
I'm just wondering if and when I edit the fronted more (let's say, when I add a new page) am I supposed to go through this process again? So I'll modify the front end folder, build that, move files, etc.
Thanks.
Yes, definitely.
If we are in a development environment, we use npm run dev or yarn run which upholds the development environment running and updates the browser whenever any modifications inside the code happen. We don't use any final build in the development environment because we make code modifications so repeatedly that it would be a sore process to make a build after every modification and check the results using that build.
But, the production is distinct from the development environment. We deploy the only code which is bug-free, entirely working, and ready for users to use. Deploying to production means all changes have been made, and the final code is ready to be deployed. So, we make a final production build and deploy it to our server.
So, don't panic to deploy to production every time you make a small change in the code. First, complete your all changes, and test the changes in the development environment, if everything is working correctly then only create a final production build, and deploy it to the server.**
I hope this helps.

Prevent expo doing full config load during expo install

We have extra config for our app to run inside app.config.ts and some environment variable validation in order to populate it. expo install, as I understand, reads some of the core expo config in order to make some decisions on library versions. It does not need the full configuration with the extra params. We have no way of detecting expo install vs normal build at runtime (i.e. it does not set any specific environment vars, or anything).
For our application, rather than using dotenv at runtime we simply require certain environment variables to exist.
Our local development scripts to start the server use dotenv-cli to populate some environment variables. Our CI builds rely on the environment variables set in CI. For this reason we always validate the required environment variables and don’t pre-populate anything.
We would either like to have a pre-script hook so we can make the same dotenv call before expo install happens, or a way to detect inside app.config.ts that expo install is running (some env) so we don’t need to expose full config.
Does anyone know how this could be achieved?
FYI this exact question was raised via the expo forums over a week ago, but there does not seem to be enough attention/activity there: https://forums.expo.dev/t/expo-install-does-full-config-load-including-extra-any-way-to-pre-hook-and-set-env-vars-or-detect-expo-install-at-runtime/62123

How to deploy Nuxt ssr to Cpanel

I'm new to vueJs and nuxt and i'm trying to deploy my nuxt app to my server, I tried the command npm run build and I have two files, client and server, I googled what should I do with this files but I got Nothing, So how to deploy my app to cpanel?
If your target is server (default), you indeed need to do npm run build. Then, you have a generated dist that you need to send to the server and then npm run start.
Sometimes, additional configuration is required and can be found in the deployment pages. There is no Cpanel but you maybe can find something that looks like the same here: https://nuxtjs.org/docs/2.x/deployment/deploying-to-21yunbox

Vue Multi-Page-Application not working in production

I am trying to implement a MPA with Vue.js and the pages configuration option it offers. Like so:
This works perfectly when I run my dev server with npm run serve and then try to go to localhost:8080/home and localhost:8080/about. When I try to build this for production with npm run build and I try to go to their respective URL's it does not work and only serves me back the index. This seems officially supported by the Vue Documentation but I can't figure out why this isn't working?
My dist folder looks something like this
Does anybody know what's going on here that's more knowledgeable in Vue.js?

Nuxt deployment and IE 11

I am heading toward my first Nuxt deployment, of a large internal application. And I’d like to support IE 11, at least for a while. But when I generate the deployment files and attempt to access a staging site with IE, I immediately receive a syntax error from one of the generated js files.
Here’s a start at specifics:
Vue 2.6.12
Nuxt 2.14.6
Vuetify 2.3.2
Nuxt plugins for axios, auth, and a few other plugins.
The application is deployed to IIS, using nuxt generate and copying the dist directory to the server. I have tried using the generate command with and without the modern -m flag. There is no possibility of deploying other than through IIS (client specification), and I’d prefer not to have to run Node there, since the static deployment should work.
I am developing on a Mac and thus have no practical way to run and access the dev version by IE.
The application works properly on modern browsers, but throws an immediate syntax error in IE.
My understanding was that an IE-compatible version would be transpiled during the generate process, but evidently I’ve missed something.
As I say, this is my first Vue/Nuxt deployment, so any advice would be appreciated. I’ll be happy to provide any further specifics.
Thanks in advance for any suggestions on what/how to troubleshoot this.
Please follow these steps
Check if the syntax error is caused due to any dependency. I ran into syntax error when using vue-calendar plugin. This plugin has problem with IE11
Try adding pollyfill.io into your application. Inside your nuxt.config.js try adding inside head
script: [{ src: 'https://cdn.polyfill.io/v2/polyfill.min.js' }]
If adding to nuxt.config.js doesn't work , try using the code into your app.html file