I have Vue v2 SPA. This is standard application as it can be. Let it be hello-world from the documentation. Let's make it and build:
vue create hello-world
cd hello-world
yarn install
yarn build
But I got a requirement: the application must be embedded (by URL rewriting, not deployed) into another site:
Before the requirement: https://site1.come/
After the requirement: https://site2.come/path-toapp/ <- reverse proxy here rewrites the url site1.com
But application's build contains absolute paths for all assets:
$ cat dist/index.html
<!DOCTYPE html>
<html lang=en>
<head>
...
<title>hello-world</title>
<link href=/css/app.fb0c6e1c.css rel=preload as=style>
<link href=/js/app.042151d6.js rel=preload as=script>
<link href=/js/chunk-vendors.f0b6743d.js rel=preload as=script>
<link href=/css/app.fb0c6e1c.css rel=stylesheet>
....
It breaks third-party site's rewrites. Resource app.fb0c6e1c.css will be got from:
https://site2.come/css/app.fb0c6e1c.css
Instead of:
https://site2.come/path-toapp/css/app.fb0c6e1c.css
How can I solve the problem? I didn't find any relevant configuration in vue's documentation.
Of course I have a solution. I can rewrite URL's in CI's script with bash:
sed -i "s/\(src\|href\)=\//\1=/g" dist/index.html
But the solution above is a hack and cannot be supported by web developers. Because of this I'm looking for more significant (webpack-based for example) solution.
You need to create a vue.config.js file in your project root, and set the publicPath option:
module.exports = {
publicPath: '/path-toapp/'
}
Related
i'm new in npm and i'm trying to migrate from an old logic like:
<head>
<script src="./assets/jquery-countdown/jquery.countdown.min.js?v=2.1"></script>
<script src="./assets/lazyload/jquery.lazy.min.js?v=1.7.9"></script>
<script src="./assets/jquery-blockui/jquery.blockUI.min.js?v=2.70.0"></script>
<script src="./assets/geonames/jeoquery_custom.js?v=0.5.1"></script>
...
</head>
<body>
....
To a logic using a unique file.js than can include all my modules inside "node_modules" folder created by npm.
But i don't understand how do this.
My server only support PHP. doesn't support node.js for example.
Node.js only installed on a local dev PC.
Any suggest or tutorial?
I have a Vue CLI 3 project, with lazy loading for the components. When running npm run build and serving the dist folder, I see that a CSS file is first prefetched and then loaded:
<link href="/css/article.70090a14.css" rel="prefetch">
and
<link rel="stylesheet" type="text/css" href="/css/article.70090a14.css">
This is the default behaviour of the Webpack config when executing npm run build. At the moment Lighthouse (Google's audit tool) is complaining and advises me the following:
"Preload key requests: /css/article.70090a14.css"
My question is, how can I add to / change this behaviour to do a preload instead of a prefetch?
You can use this plugin to prefetch css files:
https://github.com/MarvelSQ/html-prefetch-css-webpack-plugin
or
you can use style-loader to integrate css into js file and then prefetch js file using webpackPrefetch magic comment:
import(/* webpackPrefetch: true */ "...")
I have created an Angular2 app as specified in quick start guide but by using angular-cli. I created a production build using ng build --prod
Then I created a folder by the name heroes in Apache htdocs folder where I placed all the build files. So when accessing the app through http://localhost/heroes, the browser console is displaying 404 error for the js and css files
Any help would be great.
PS - I have a route in the app by the same name as the app folder name in apache i.e. heroes
In your index.html
You can change
<base href="/">
To
<base href="/heroes/">
and change
<script src="/js/shims.js?1484291198182"></script>
<script src="/js/app.js?1484291198184"></script>
To
<script src="js/shims.js?1484291198182"></script>
<script src="js/app.js?1484291198184"></script>
It's working for me
I currently have mapbox.js#3.0.1 installed, which depends on leaflet#1.0.2. I want to npm install a leaflet plugin leaflet.markercluster#1.0.2, which requires leaflet 1.0.x (which I have through mapbox.js). How can I install leaflet.marketcluster and tell it to find leaflet using mapbox's dependency?
Leaflet is indeed already included within Mapbox.
So you should not have anything to do in particular to have Leaflet.markercluster plugin work with it.
Should you load those 2 libraries the "standard" way (i.e. through <script> tags in your HTML page), everything should work without issue:
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<script src='https://unpkg.com/leaflet.markercluster#1.0.3/dist/leaflet.markercluster.js'></script>
<link href='https://unpkg.com/leaflet.markercluster#1.0.3/dist/MarkerCluster.css' rel='stylesheet' />
<link href='https://unpkg.com/leaflet.markercluster#1.0.3/dist/MarkerCluster.Default.css' rel='stylesheet' />
Demo: http://plnkr.co/edit/HX6yYCvNEvv8rD0khIjG?p=preview
Now since you want to include Leaflet.markercluster through npm, I think you can simply have the lib code included in your bundle (e.g. through import "leaflet.markercluster", or whatever is required by your build engine), and the L.markerClusterGroup factory should be added without issue.
I copied my Angular 2 app on the Apache HTTP Server 2.4 in the htdocs folder, but it doesn't work.
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular 2 app</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
If I try to open the index.html page in the browser, I see only the text "Loading...." in my browser.
The Angular 2 App is not displayed.
How can I fix this?
It works on my local environment right, where I am using Angular CLI. I need to find a way to make it work on the Apache HTTP Server 2.4.
The only thing I have to do locally is to run npm start.
you just need to add a point in the base href <base href="./">
You will need to create a Build if you are planning to run your app on a remote server. Use the 'ng build' command (stop npm start first). ng build will create a distributable build in the 'dist' folder in your project. You can copy the contents of this folder to your remote server.
First, install Angular CLI in your dev environnement (if not done already)
npm install -g angular-cli
Run this command to build a dist version of your project
ng build -prod
copy/paste the content of dist folder into the root of your local (or online) apache server
if you are using angular-cli follow this steps:
you need build your app for production run (this generate a folder with the name of your app) :
ng build -prod --output-path=[appname]-bh /appname/
copy your app folder into root apache server path : /var/www/html/
That's all
Regards,
Fernando.