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?
Related
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
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
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
I'm new to stackexchange and webpack. I'm trying to set up a development server using webpack-dev-server and my express server. I'm using webpack to build the entire back-end and front-end and it works perfectly, yet the routes in my server code do not work when I try to use webpack's development server. I tried for days to get this to work and searched the internet for a solution, however, my skill level is just not high enough to deduce a solution from available online help, so now I'm here.
Inside my webpack.config.js there is a server config that will run on node and a client config that will run on the front-end. I played with the devServer.proxy settings to no avail (I don't seem to understand what exactly is going on with these settings).
If you want to take a look at the whole source code: https://github.com/spencel/gwpp-v1-dev.git
here is what my project tree looks like:
I am new to reactjs. I created a basic react app using create-react-app boilerplate. I prepared the build by running the command npm run build.
Now I want to host the build folder. Which is better and why.
Please let me know if any better and easy option available as I am new to this.
Whatever is available to you will do just fine. When you run npm run build static it will create static files that you are able to host from whatever web-server you want. If you are curious about performance numbers, they are negligibly different in this case. Just choose whatever platform you feel most comfortable with.