相关文章推荐
正直的乌龙茶  ·  GROUP BY 修饰符 | ...·  8 月前    · 
Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

How to solve noscript - doesn't work properly without JavaScript enabled when serving a Vue App

Ask Question

I'm setting up a new Vue.JS application using the Vue UI interface. When I start the application using vue serve src/App.vue the application starts but it only displays in the page the default Home | About . When I inspect the page in the HTML I see:

<noscript>
      <strong>We're sorry but basicapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>

and in the console I see

[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue

I am working with the basic application created when running the Vue UI

I am working with the basic application created when running the Vue UI If I run the application using the vue ui command followed by starting the application from the Vue UI it works.

The reason I want to open the application using the command line is that in Cloud9 where I want to test the application the vue ui starts on localhost and I cannot find a way to open it. The only changes I made to the application files were done only to make the application run inside the Cloud9 container: changed the package.jsonadded:

"dev": "webpack-dev-server --inline --progress --port 8080 --host 0.0.0.0 --config vue.config.js --public $C9_HOSTNAME",

created the vue.config.js and added:

module.exports = {
  devServer: {
    compress: true,
    disableHostCheck: true,
                did not work for me. It seems problem is due to lint settings. If I use new Vue({ render: h => h(App, Rating)}).$mount('#app').$mount('#app')will launch the default app, but syntax like new Vue({  el: '#app'})won't.
– user305883
                Nov 6, 2019 at 21:34
                guys, I am also facing the same issue. npm run serve is running fine but We are trying to build the code. once build is generated using npm run build or yarn build if you open the index.html present in dist folder, you find this error message in this html itself. Still have no clue why this error occurs
– Manoj Verma
                Jan 30, 2020 at 5:51
                @ManojVerma , by default once a vue app is built, it needs to be served from a server - it is not designed to just be opened in the browser ( not by default ).
– Pascal Lamers
                Jan 23, 2021 at 19:00

After 2.5 days of search I found that the content in index.html ( We're sorry but basicapp doesn't work properly without JavaScript enabled. Please enable it to continue. ) is not an error actually.

It is default text for those browsers in which javascript is not enable so don't worry about this at all.

To run your application in dev mode you can use Yarn serve command. If you want to build your application then use yarn/npm build and configure/use the index.html present in dist folder without any doubt.

This occured, when I accidentally set my web directory to the /public instead of the /dist directory. After I changed the apps root to point to the /dist directory in my nginx settings it worked fine.

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name mydomain.com;
    root /path/to/my/website/dist;
    # other settings below...

Vue's build directory, dist, is meant to be served by an HTTP server. Use npm's serve package to serve the folder.

Download using

npm install -g serve

and serve using

serve -s

when in the dist folder or provide path to dist folder

serve -s path/to/dist

I have de same problem, but I don' use http://127.0.0.1:8080 I use ip private http://192.168.100.74:8080/ and It's worked!!! note:use your ip

I had problem with my port 8080 or mi ip

npm run serve is just to run your dev code. npm run serve is running fine but We are trying to build the code. once build is generated using npm run build or yarn build if you open the index.html present in dist folder, you find this error message in this html itself. Still have no clue why this error occurs. – Manoj Verma Jan 30, 2020 at 5:50

Was facing a similar issue. Realised that the issue was with my router object.

const router = createRouter({
    history: createWebHistory,
    routes: routes

The problem here was that I was using the createWebHistory method as a variable, instead of using it as a method i.e. createWebHistory()

const router = createRouter({
    history: createWebHistory(),
    routes: routes

Check your backend configuration if you are using API. In my case I was using Node.js in backend and the issue was coming from my Node.js config, the server was not sending data in a proper JSON object due to the wrong config I did.

Stop the backend server, and run the Vue.js app, and then check if the message is still showing in your browser.

If the message is missing, then your backend is not well configured.

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Community Feb 24 at 20:34

It was about vue router.js to me. After commenting out some paths, the site worked.

Turned out the new router that I commented out had the same component as the old route (the one that stopped working):

path: '/good_old_route_stopped_working', name: "DogPage", component: DogPage path: '/bad_new_route_should_be_removed', name: "DogPage", component: DogPage

'We're sorry but basicapp doesn't work properly without JavaScript enabled. Please enable it to continue.'

This Message will be shown when you open the Browser without javascript :D when you want to see it you should be disable The Javascript in your Browser

This doesn't sound like it'd solve the original issue. I think the problem is the user wants to view a working version of their app with HTML from rendered components, rather than just the noscript tag. – phsource Aug 10, 2020 at 18:45

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.