I installed Laravel 5.4 in my server /public_html/laravel/ folder. When I access example.com/lavarel/public/, it works.
I copied all my compiled files in my local public/ folder into the example.com/lavarel/public/. Then I add the <script src="/js/app.js"></script> into my welcome.blade.php:
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/css/uikit.min.css" />
<!-- <link rel="stylesheet" href="assets/sass/uikit.css" /> -->
<!-- jQuery is required -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/js/uikit-icons.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app" style="background:#666;height: 100vh;">
<router-view></router-view>
</div>
<script src="/js/app.js"></script>
</body>
</html>
But when I go to example.com/lavarel/public/ again, I got 404 error:
GET example.com/js/app.js 404 (Not Found)
if I change to <script src="/laravel/public/js/app.js"></script>, I will get another 404 error:
GET example.com/laravel/public/laravel/public/js/app.js 404 (Not
Found)
How can I resolve this?
I have same issue. It simply solved by running:
npm run dev
Step1: run the below command in your project.
npm install
Step2: after successful npm modules installations run the below command.
npm run dev
For better understanding visit laravel doc: https://laravel.com/docs/5.8/frontend
Related
I have a curious error while i try to download an apk file with a website in vue :
Based on How to download a locally stored file in VueJS, i try to download a local file with this command :
Download
But no matter what i put in href, the file download is always this 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.0">
<link rel="icon" href="/favicon.ico">
<title>client_web</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but client_web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
I don't understand where this file come from, and how to make my link download the apk file.
Edit: vue.config.js
"transpileDependencies": [
"vuetify"
],
chainWebpack: config => {
config.module
.rule('apk')
.test(/\.(apk)$/)
.use('apk-loader')
.loader('apk-loader')
.end();
}
}
Directory Tree:
│ └──views
│ └──APKDownload.vue
└──app-debug.apk```
There could be 2 problems:
Server does not allows you to download '.apk' files.
There is a path problem. The fastest way to check it is in DevTools/Network, what url is used to download file as you use ../../app-debug.apk.
I downloaded a theme providing html, css3, js file
and I added the path as below source
<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Porto - Responsive HTML5 Template 7.5.0</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Porto - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Theme CSS -->
<link rel="stylesheet" href="/static/css/theme.css">
<link rel="stylesheet" href="/static/css/theme-elements.css">
<link rel="stylesheet" href="/static/css/theme-blog.css">
<link rel="stylesheet" href="/static/css/theme-shop.css">
<!-- Current Page CSS -->
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/settings.css">
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/layers.css">
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/navigation.css">
<!-- Demo CSS -->
<!-- Skin CSS -->
<link rel="stylesheet" href="/static/css/skins/skin-corporate-5.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="/static/css/custom.css">
<!-- Head Libs -->
<script src="/static/vendor/modernizr/modernizr.min.js"></script>
It works well when I approach at first
However, when i move using router it doesn't run some css and JavaScript.
so I tried to add a javascript path on component file
<template>
<div role="main" class="main">
test
</div>
</template>
<script>
import "/static/js/theme.js"
</script>
When I try like this I can see this error
This dependency was not found:
* /static/js/theme.js in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/parents/Robot.vue
To install it, you can run: npm install --save /static/js/theme.js
is there the way to load whole index.html again? or another way to resolve this issue?
Instead of writing static in the index.html files path, use <%= BASE_URL %>.
For example instead of adding all css and script files with href="/static/vendor/modernizr/modernizr.min.js", write like this href="<%= BASE_URL %>/vendor/modernizr/modernizr.min.js"
I am trying to add a local file to the HEAD section of index.html in my VueJs project.
index.html
<!doctype html>
<meta charset="utf-8">
<html lang="en">
<head>
<!-- https://npms.io/search?q=vue%20split -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="../src/assets/js/myfile.js"></script>
<title>demo</title>
</head>
My file structure is as follows:
/path/to/project
/public
index.html
/src/assets/js/myfile.js
When I add the javascript file, it seems to be interpreted as an HTML file, so in the console, I see the following error:
Uncaught SyntaxError: Unexpected token <
When I look at the source in the Chrome browser, I see that the js in interpreted as an HTML file.
I hosted my angular App on Amazon Web Services S3. It is working like a charm in Firefox and IE but not in Chrome. In console I keep receiving :
(index):1 Uncaught SyntaxError: Unexpected token <
(index):1 Uncaught SyntaxError: Unexpected token <
My index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Application</title>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link href="lib/angular-material/angular-material.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- js libs -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- angular material requirements -->
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-aria/angular-aria.min.js"></script>
<script src="lib/angular-messages/angular-messages.min.js"></script>
<!-- angular material -->
<script src="lib/angular-material/angular-material.min.js"></script>
<!-- your app's js -->
<script src="modules/Add/add.js"></script>
<script src="js/all.min.js"></script>
</head>
<body ng-app="Application">
<div class="ng-main" ui-view ng-cloak></div>
</body>
</html>
CORS are activated! Do you have any idea? Any help would be appreciated!
PS : Locally, with npm start, it is also working on chrome without any problem!
All I had to do is CTRL+MAJ+R on Chrome and it is working like a charm! Solved
I've been using Bootstrap for abt a year now, and it works nicely. But when I try to use the files locally, it's always the same result: my Navbar dropdown menus stop dropping down.
Can anyone see what I'm doing wrong?
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<script src="js/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
Errors are:
wsschedulepolygraphs.php:14 GET http://localhost/dfwit/js/jquery.min.js
wsschedulepolygraphs.php:17 GET http://localhost/dfwit/js/jquery-ui-1.11.4/jquery-ui.min.js
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.min.js:6
dropdown-enhancement.js:267 Uncaught ReferenceError: jQuery is not defined(anonymous function) # dropdown-enhancement.js:267
wsschedulepolygraphs.php:434 Uncaught ReferenceError: $ is not defined(anonymous function) # wsschedulepolygraphs.php:434
wsschedulepolygraphs.php:530 Uncaught ReferenceError: $ is not defined
Incorrect permissions on a directory can cause 403 and other access errors when reading files. To check owner and group of the current directory from the command line:
~$ ls -ld
drwxr-xr-x 2 owner group 4096 Aug 12 19:12 Desktop
Sources:
How to Find Owner and Group of a Directory
https://superuser.com/a/91966
Just looking at the code, your path for bootstrap differs from all the other JavaScript includes.
<script src="js/jquery.min.js"></script>
^^^
<script src="/js/bootstrap.min.js"></script>
^^^
The path of the js files is not correct. Also for the below code the / before the js could cause an issue
<script src="/js/bootstrap.min.js"></script>