I'm trying to deploy a Vue app in production. After executing the command "npm run build" I copied "index.html" and "dist" into my apache root directory. When I access to my website, the next mistake appears:
external "vue-axios":1 Uncaught ReferenceError: vue is not defined
Do you know if I have to do an additional step before deploying my app?
PX: This app works properly by using "npm run dev"
So it looks like the reason you are getting Uncaught ReferenceError: vue is not defined is likely due to the fact that you are requiring your source code bundle before you are requiring Vue.js. (Assuming you don't have vue bundled into your source)
So when the browser hits <script src="/dist/build.js"></script>, any code that relies on vue is going to fail.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>soporte_7x24</title> <link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/…; crossorigin="anonymous"> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> <script src="cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/…;"/> </body> </html>
Change the order of <script src="/dist/build.js"></script> so that it is after <script src="cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/…;"/>
Related
Just starting with vue.js. I am using Visual Studio Code, and have followed all the instructions for using VS Code with the Volar extension. I can see from the source files that the sample project includes a 'hello world' page (HelloWorld.vue). But when I run index.html I just get a blank screen , because of a CORS error (see below).
I haven't changed any code from the installed sample, so it appears that the vuejs.org instructions are not complete.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
and main.js:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
So what do I need to do to make use of the example .vue components?
The Chrome console shows a CORS problem:
Access to script at 'file:///C:/Users/quilk/Documents/testvue/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
To have an easy and simple time working with Vue, I recommend following the official steps:
npm init vue#latest
cd <your-project-name>
npm install
npm run dev
For CORS, you need to fix it on your backend/service dashboard. More details are available here.
I have a Vuejs app that I'm trying to serve via a Golang backend that will also serve the app's API.
When I build and run the Vuejs via "npm run build" and "serve -s dist" and go to the static server's location, everything loads up fine. But when I try to load it through the Golang backend, even though the index.html loads (as verified by checking the source in the browser), I just get a blank white page.
Is this approach not possible? Am I going about this all wrong?
Here is how I am serving the "dist" folder via Golang.
http.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir(htmlFolder+"/dist/"))))
My index.html file:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>TestApp</title>
<link href=/css/app.52c62e82.css rel=preload as=style>
<link href=/css/chunk-vendors.7724753e.css rel=preload as=style>
<link href=/js/app.9a3ab992.js rel=preload as=script>
<link href=/js/chunk-vendors.6808fe3a.js rel=preload as=script>
<link href=/css/chunk-vendors.7724753e.css rel=stylesheet>
<link href=/css/app.52c62e82.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but TestApp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<script src=/js/chunk-vendors.6808fe3a.js></script>
<script src=/js/app.9a3ab992.js></script>
</body>
</html>
Edit:
I also tried using gorilla/mux example here:
https://blog.questionable.services/article/vue-react-ember-server-golang/
And here is my "dist"'s folder structure.
press F12 on your browser and go to console tab to view the error
Turns out I just needed to empty my caches. I was using FN5 when refreshing assuming that that would reload it.
getting error while integrating bundle.js, and i used "script-loader" in but no use.
libraries used
vuejs, vuex, ssr, vuetify, webpack.js
Error:
build.js:1 Uncaught ReferenceError: module is not defined
at build.js:1 .
change script from
<script src="/dist/build.js"></script>
to
<script nomodule src="/dist/build.js"></script>
add nomodule attribute in script tag, its happen because we used libraryTarget: 'commonjs2' in webpack config
finally my index.html will be like
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<script nomodule src="/dist/build.js"></script>
</body>
</html>
Note:
do not make any changes in src attribute
I would like to run locally a Vue.js/System.js demo app I just got recently, never used System.js before (and I'll not...)
I only want to run this demo, before switching it to webpack...
There is no npm script (so no install, no run dev)
How should I run it to display in my local browser?
Anything to do before running? (there is no documentation on it..)
demo
app
components
About
App
..
index.js
routes
Home
...
index.js
style
main.css
assets
home
...
...
documentation
...
libs
favicon.ico
index.html
readme.html
UPDATE
Here is the system.config:
System.config({
defaultJSExtensions: true
, map: {
'app': './app'
, 'js': '/libs/js'
, 'style': '/libs/css'
, 'theme': '/app/theme'
, 'babel': '/libs/js/babel-core'
, 'components': '/app/components',
'routes': '/app/routes',
},
transpiler: 'babel'
, meta: {
'js/*.js': {
format: 'global'
}
}
});
System.import('/app/index.js');
And the index.html:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="BelosTemas">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test template</title>
<link rel="shortcut icon" type="image/png" href="favicon.ico" />
<link rel="stylesheet" href="./app/style/main.css" id="theme-stylesheet">
</head>
<body>
<div id="app">
<app></app>
</div>
<!-- system -->
<script src="/libs/js/system.js"></script>
<script src="/app/system.config.js"></script>
</body>
</html>
UPDATE 2
I changed the script src paths in the index.html relative paths (src='./)
now the script file is located .. but it's not executed correctly, CORS related issue ..
Error:
system.js:5 Failed to load file:///app/index.js: Cross origin requests
are only supported for protocol schemes: http, data, chrome,
chrome-extension, https.
I solved it , installing a lightweight web server
npm install -g live-server
then in the console, going to my app directory, I just run it
live-server
default browser is open with http://localhost:8080
bonus : hot reloading !
what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.