Version
2.5.2
Reproduction link
http://test.airspace.cn/
Steps to reproduce
1.Clear the browser cache
2.Enter url and dev-tool see if there is a blank page phenomenon. lt's because the main.js doesn't request.
3.Refresh the browser, lt's normal.
4.Open a new browser tab and enter the url, blank page will appear occasionally.
What is expected?
can reach the site everytime
What is actually happening?
blank page
open a new tab and enter a url
refresh again and again
this is main.js
import Vue from 'vue'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '#/config/base'
import * as allFilters from '#/config/filter'
import { category } from '#/config/constant'
import App from '#/App'
import router from '#/router'
import store from '#/store/index'
import '#/directive'
Vue.config.productionTip = false
// Vue.use(Button)
Vue.use(Vuex)
Vue.use(ElementUI, { size: 'small' })
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
Object.keys(allFilters).forEach((key) => {
Vue.filter(key, allFilters[key])
})
store.dispatch('dispatchPlaneTypes')
store.dispatch('dispatchPlaneBrands')
process.env.NODE_ENV === 'development' ? console.log(category) : '' //eslint-disable-line
Related
I have a Vue2 application that is utilizing Vuetify.
I've noticed that, when using the material design icons, the application is reaching out to a CDN to retrieve those icons which causes render blocking issues.
I've followed the documentation here to install locally, but I can still see the CDN being accessed in the network tab of my browser inspector.
I used the vue cli to generate the app so I am unfamiliar with using webpack to reference css-loader. My config is listed below:
// /src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import store from './store'
Vue.config.productionTip = false
new Vue({
vuetify,
store,
render: h => h(App)
}).$mount('#app')
// /src/plugins/vuetify.js
import '#mdi/font/css/materialdesignicons.min.css'
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
});
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
]
})
I'm using vuetify, and I need to add font awesome library, but I don't know how to do it, it looks like the vuetify documentation is not updated, the guide for add font awesome says I should add the next in main.js:
Vue.use(Vuetify, {
iconfont: 'fa4'
})
or something similar,my problem is that I'm using another method for run the app, my main.ts is the next:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import 'font-awesome/css/font-awesome.min.css' // Ensure you are using css-loader
require('#/SCSS/main.scss')
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
If I add the "Iconfont" to my New Vue({}),it doesn't work.
how can I add font awesome to vuetify in this case?
You need to use vue-fontawesome.
First install fontawesome vue-fontawesome, core and icons:
$ npm i #fortawesome/vue-fontawesome
$ npm i #fortawesome/fontawesome-svg-core
$ npm i #fortawesome/free-solid-svg-icons
Then in src/main.js
import Vue from 'vue'
import App from './App'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
Now that it is done you will be able to use the icons using the next tag:
<font-awesome-icon icon="user-secret" />
All you have to do is replace the value in the icon attribute:
icon="Replace this text"
EDIT 1: Here you have a working example in codesandbox:
EDIT 2:
I will add a screenshot because CodeSanbox sometimes takes a lot of time to load, this is just to prove that if you wait you can actually see the icon.
I have 1 component called calculator.vue and in my main.js I have the code for the plugin, like below:
import App from './App.vue'
import vuetify from './plugins/vuetify'
import "./plugins/vuetify-money.js"
import VueMeta from 'vue-meta'
import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, {
id: 'My UA',
disableScriptLoader: true
})
Vue.use(VueMeta);
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')```
As told here: https://github.com/MatteoGabriele/vue-analytics
his plugin will stop receiving feature requests. I will only spend time for important bug fixes. Google moved from analytics.js to its new gtag.js library and I've created a new plugin called vue-gtag. I suggest you to start using that one if you are about to create a new project.
You can see an example here: https://matteo-gabriele.gitbook.io/vue-gtag/#add-plugin-to-your-application
import Vue from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";
Vue.use(VueGtag, {
config: { id: "UA-1234567-1" }
});
new Vue({
render: h => h(App)
}).$mount("#app");
I've just started to learn vue and vuex.
I want to use the progressbar from this link
Like the description said I imported the main.js file into my actions.js
import app from '../../../main' //This is causing the error
so I could use this just before my axios-request:
app.$Progress.start()
The main.js file:
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window._ = require('lodash')
require('admin-lte');
require('bootstrap')
} catch (e) {}
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import VueProgressBar from 'vue-progressbar'
import swal from 'sweetalert2'
import moment from 'moment'
Vue.config.productionTip = false
Vue.use(VueProgressBar, {
color: 'rgb(143,255,199)',
failedcolor: 'red',
height: '5px'
})
Vue.use(require('vue-moment'))
Vue.use(moment)
window.bus = new Vue()
window.swal = swal;
const toast = swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3500
})
window.toast = toast
export default new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
This is working, but I'm getting errors when working on those pages.
( "TypeError: _main__WEBPACK_IMPORTED_MODULE_1__.default is
undefined")
Edit: Updated the main.js file
So my question is how do I fix this?
It looks like one of the modules you are importing does export anything default, can you check/include your store and router files?
export default {...} //Missing from one of the modules
The documentation says like this:
<script type="text/javascript" src="assets/js/vue-shopify-products.js"></script>
And then before you initialize vue, you do this:
Vue.use(ShopifyProducts);
What do you do if you use vue-cli webpack template?
My main.js file looks like this
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import * as d3 from 'd3'
import * as shopifyProducts from 'vue-shopify-products'
Vue.config.productionTip = false
Vue.use(shopifyProducts)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
created: function () {
d3.csv('/static/data/csv-files/bicycles.csv', (data) => {
let products = this.$formatProducts(data)
console.log(products)
})
}
})
This doesn't work as I get the error 'Uncaught (in promise) TypeError: _this.$formatProducts is not a function'. What is the correct way to include Vue-Shopify-Products and reference the $formatProducts function?
Since it is an npm package installed as a dependency, you should import it this way,
import defaultExport from "module-name";
so this should work:
import ShopifyProducts from "vue-shopify-products";
Vue.use(ShopifyProducts);
After that you can get rid of the script reference of the module.
Edit 1:
I don't think is going to work since the module you are trying to use as a Vue plugin do not follow the conventions especified on the Vue documentation.