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
Related
I have vue project which published on Digital Ocean. The main problem is when i make some changes on FileZilla it is not affect on website. How can i solve this issue?
This is not an issue per-se. This is just the way how modern web development works. Vue.js (but also Nuxt) is using a bundler right now (Webpack, Vite are the most common), hence to go to production it needs to be bundled each time you push something to it.
If you upload something via FTP or SSH and edit some source code, a bundle step will be required in order to get any changes on the actual webapp.
Backend languages may not need that, for example you could SSH into a server and change some .php file, if you F5 the page it will be updated in real time. But this is not how frontend JS code works, it needs to be optimised.
Another thing, sending code via SSH/FTP is not really a good workflow because it is not easily trackable, no version-controlled, will not trigger any build flags in case of an error etc...
The best approach is to have a git repo + some build step included in some CI.
A common platform for it is Netlify, you connect a Github repo, you tell which command to use to build the project and each time you push some code, it may do some checks/tests/optimizations/etc... via Github Actions before being released automatically to production (updated on your webapp).
This workflow have a lot of benefits as one may tell but is also de-facto, the official/regular approach for modern Web development on the frontend.
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
My project is built using Vue.js, powered by Nuxt
I’m using Cypress to write/run tests
I’m using CircleCI (v2) to run the tests
Locally, using Cypress’s instance of the Electron browser on macOS, the tests run correctly.
On CircleCI, the tests display a blank screen.
I’ve SSHed into CircleCI after the tests have failed, and if I make a curl request to the local server at that address, the correct HTML is returned to me.
My hypothesis is that the browser is not able to run Vue.js, but without a console log it’s hard to tell.
Any ideas as either how to continue debugging, or even better, fix it?
Edit: I’ve written an extra test to use another site, and it loaded correctly, so I can confirm that everything else is working.
Edit: It’s in my Nuxt config, just going through it now to pull out the line causing the problem.
So, of course this was super annoying. I’m not sure what the chances are of this happening to somebody else, but here’s the answer to my problem:
Google Analytics
On my CI I don’t have a GA code, and it was falling back to empty string, so it wasn’t able to load the page. It didn’t show up on the sever logs as it was an issue on the client side, and it’s not yet possible to easily get client logs using Cypress (coming soon).
Interesting, Thomas,
Could you open a GitHub issue with a link to a small repo that we can try ourselves? I do not see any factors that might affect running Cypress tests against Nuxt app on Circle
I am working on a project using Angular 4 for the frond-end and phph for the back-end with an Apache server using ubuntu 16.04 LTS where we setup Node JS to make's actually works Angular. So I have two questions in one, how do do to make run Angular 4 without Node JS? Are all our perf issues comming from that (Node JS on apache?) or is it my code who's make run the apps very slow? For exemple, when I check the access log servor from apache using cat /dev/null >access_log I see like 30 requests just to run the first page...how could I optimise that?
See my plunker link here (not all the code is here but he give you an idea of the construction) [Mypluker][1]
[1]: http://plnkr.co/edit/4CUPwqehwkiHNnFd1NtU?p=catalogue
The quickstart seed from angular.io ils not expected to be used for production. It's just an example of how you can quickly start developement.
For instance the quickstart do typescript transpilation inside the browser. You should avoid this kind of things.
One of the easiest solution for dev and production build is to use angular-cli.
With a production build you don't need nodejs only a webserver that can serve static files.
I'm stumped. I cannot understand the getbootstrap.com Getting Started info. I'm running on Windows 7 Pro. I would like to use Pingendo - which I'm new to - to create my website.
I downloaded the distribution version bootstrap-3.3.7-dist.zip (pre-compiled) and unzipped it. Then I came to the MaxCDN code. Where do I put that code??
For the source code version, I see references to things I don't know about: Bower, npm, Composer, Grunt, Less, and SASS. All these appear to be Linux based tools - from the command lines shown. How does one accomplish the same thing under Windows without installing yet more tools? Do I even need to compile this code to use the greater features?
You can either add the downloaded bootstrap css and js files to your project and reference them or you can just use the cdn which is just the same files hosted on a server. You do now have to know about any of those to get started with Bootstrap. They are just additional ways to install it, and different preprocessors that you can leverage.