I'm trying to decrease the bundle size of my Vue project, which scaffolded by the vue-cli, by using CDN of firebase, Vue, and Vuetify.
So, I've added links of these CDN in public/index.html as follow:
<!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="<%= BASE_URL %>favicon.ico">
<title>magiclabel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but t4v4 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Add config.externals to vue.config.js as follow:
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: (config) => {
config.externals({
firebase: 'firebase',
'firebase/auth': 'firebase',
firebaseui: 'firebaseui',
vue: 'Vue',
vuetify: 'Vuetify',
'vuetify/lib': 'Vuetify',
})
}
}
Then, the report.html created by issueing yarn build --report indicated that the Vuetify is still in the bundle even other firebase and Vue is going away as follow:
Is there any wrong or insufficient steps?
If you are using vuetify from vue-cli-plugin-vuetify (vue add vuetify), treeshaking and auto component import is enabled by default, by using vuetify-loader.
If you look into the source code of vue-cli-plugin-vuetify, it only uses vuetify-loader if it is present in your package.json. So removing vuetify-loader from package.json should disable this behavior.
Related
I have a Vue (^2.6.10) application and want to build it to electron. I use "vue-cli-service build" and paste the created dist folder in my electron project but the html page only shows white, without errors.
My Vue main entry:
window.Api.Vue = {
start () {
window.app = new Vue({
el: '#app'
, i18n
, router
, render: h => h(App)
})
}
}
This builds correctly into the app.js file in the dist folder.
My dist/index.html file:
<!DOCTYPE html>
<html lang="">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=format-detection content="telephone=no">
<link rel=icon href=www/favicon.ico>
<title>Salesapp</title>
<link href=css/app.css rel=stylesheet>
<script type="module" defer="defer" src="app.js"></script>
</head>
<body>
<noscript><strong>We're sorry but salesapp doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>
<div id="app"></div>
</body>
</html>
I have tried the same approach successfully with other projects, but somehow this one doesn't work. Does anyone know why my html page is empty, and doen't return any errors?
I am pretty new to Vue.js.
I am trying to build a project without cli.
I've tried to add the CDN into the index.html.
and create a app.js file , add it to index.html and it works well.
Then I watch some youtube and tutorial, the idea of component kicks in and I am trying to add the Single-File Components into the project.
But I do not know how to structure the files so that it could work with the components.
Here are what I've got so far , could someone please tell me what's wrong here？
Any suggestions would be appreciated.
Many Thanks.
Oren
index.html
<!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, shrink-to-fit=no">
<title>new Vue project</title>
<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" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
App.vue
<template>
<div class="container">
<Header />
</div>
</template>
<script>
import Header from './src/components/Header'
export default {
name:'App',
components:{
Header,
},
data(){
return{
test:'oren testing'
}
}
}
</script>
SFCs require a build step and is recomended
When using standard Vue without a build step and mounting to in-DOM templates, it is much less optimal because:
We have to ship the Vue template compiler to the browser (13kb extra size)
The compiler will have to retrieve the template string from already instantiated DOM
The compiler then compiles the string into a JavaScript render function
Vue then replaces existing DOM templates with new DOM generated from the render function.
If you still don't want a build step, take a look at petite-vue
These errors occur after the build:
Error from hosting in GitHub pages:
Failed to load resource: the server responded with a status of 404 () /e-library/js/app.af7a444d.js:1
Error from opening it locally:
Access to script at 'file:///D:/Office%20Files/Projects/eLibrary/e-library/dist/js/chunk-vendors.0aa8295f.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
But running on the server it works perfectly.
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>e-library</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">
<script defer="defer" type="module" src="js/chunk-vendors.8ef93056.js"></script>
<script defer="defer" type="module" src="js/app.af7a444d.js"></script>
<link href="css/chunk-vendors.82c260bb.css" rel="stylesheet">
<link href="css/app.3dfcde27.css" rel="stylesheet">
<script defer="defer" src="js/chunk-vendors-legacy.8c436468.js" nomodule></script>
<script defer="defer" src="js/app-legacy.687726a0.js" nomodule></script>
</head>
<body><noscript><strong>We're sorry but e-library doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>
<div id="app"></div>
</body>
</html>
I tried publicPath:
module.exports = { publicPath: '', transpileDependencies: [ 'vuetify' ] }
Did I miss something?
I fixed it by adding this line of code in vue.config.js:
const {defineConfig} = require('#vue/cli-service')
module.exports = defineConfig({
publicPath: process.env.NODE_ENV === 'production'
? '/e-library/'
: '/'
While trying to use Twilio TaskRouter JS SDK on Vue JS, that you have load through CDN.
<!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="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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 src="https://sdk.twilio.com/js/taskrouter/v1.21/taskrouter.min.js" integrity="sha384-5fq+0qjayReAreRyHy38VpD3Gr9R2OYIzonwIkoGI4M9dhfKW6RWeRnZjfwSrpN8" crossorigin="anonymous"></script>
</body>
</html>
I want to init my worker like this:
export const initWorker = (token) => {
return new Twilio.TaskRouter.Worker(token);
}
but it's giving me this error: 'Twilio' is not defined. but it's actually working and returning the Worker object. is there way to ignore or to say Vue js that I'm expecting Twilio?
Found a fix, you have to tell eslint that you'll have this as global, there are two ways to go:
add this before your variable call:
/* global Twilio */
or edit your eslint config:
'globals': {
'Twilio': 'readable'
},
I am stymied by this issue. For some reason the Angular routing is not working at all. I simply get a blank screen. All of the modules are loading, there is no error in the console, and if I enter Angular in the console, it works. Yet, I get a blank screen.
<!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">
<title>QuickCalcs</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" href="css/ng-animation.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/factories.js"></script>
<script src="controllers/qcController.js"></script>
</head>
<body ng-app="qc">
<div ng-view></div>
</body>
</html>
-----------------------------
app.js file is:
-----------------------------
var qc = angular.module('qc', [
'ngRoute',
'ngAnimate',
'ngResource'
]);
qc.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/home', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/results', {
templateUrl: 'views/results.html',
controller: 'qcController'
}).
otherwise({
redirectTo: 'views/home.html'
});
}]);
-----------------------------
Directory structure is:
-----------------------------
qc
/js
app.js
/views
home.html
results.html
/controllers
qccontroller.js
You must link your page to the application module
in the html tag like this:
< html lang="en" ng-app="qc" />