I'm developing a vue3 project with vite.
The HMR doesn't working fine in my dev enviroment.
When a vue file edited, vite handle the change and send a message thru websocket correctly
{"type":"update",
"updates":[{"type":"js-update","timestamp":1669740364450,"path":"/src/views/user/LoginView.vue","explicitImportRequired":false,"acceptedPath":"/src/views/user/LoginView.vue"}]}
but in the browser (I tried different ones) nothing happened.
Any solution?
my package.json
{
"name": "frontendq",
"private": true,
"version": "0.9.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#quasar/extras": "^1.15.5",
"axios": "^1.1.3",
"moment": "^2.29.4",
"quasar": "^2.10.2",
"vue": "^3.2.45",
"vue-i18n": "9",
"vue-recaptcha": "^2.0.3",
"vue-router": "^4.1.6",
"vue3-cookies": "^1.0.6",
"vuex": "^4.1.0"
},
"devDependencies": {
"#quasar/vite-plugin": "^1.2.3",
"#vitejs/plugin-vue": "^3.2.0",
"sass": "1.32.12",
"vite": "^3.2.4"
},
"packageManager": "yarn#3.2.4"
}
I've been dealing with this issue in a project with Vue 3, TypeScript and Vite 4. I added the next to my vite.config.ts to fix the hot reload:
server: {
watch: {
usePolling: true,
}
},
My entire vite.config.ts:
import {defineConfig} from "vite";
import vue from "#vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
watch: {
usePolling: true,
}
},
});
Related
I am using vite to build my assets and this works fine except for the background images.
Example:
<img src="/img/ruben.jpg" alt="Ruben">
Works and has as url: http://mylocalsite.nl.test/img/ruben.jpg which is good.
But this:
&:before{
content: "";
background-image: url('/img/svg/echtveilig-beeldmerk.svg');
}
Has as url: http://127.0.0.1:5173/img/svg/echtveilig-beeldmerk.svg which is the local server started by vite but I don't want that, I just want the same url as for image tags. How can I fix that?
I tried creating a file 'postcss.config.js' and adding:
module.exports = {
plugins: {
autoprefixer: {},
},
};
But this does not work.
My package json:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.50.1",
"sass-loader": "^12.1.0",
"vite": "^4.0.0"
},
"dependencies": {
"bootstrap": "^5.3.0-alpha1",
"autoprefixer": "^10.4.8",
"swiper": "^8.1.3"
}
}
try this instead
url("{{ asset('assets/img/svg/echtveilig-beeldmerk.svg') }}")
I'm having an issue using pinia, Previously I used vuex on my project but I wanted to migrate to pinia to handle my store. So I think, I setup pinia properly. So I can run the serv of my application without issues. But here is what i get when i open the page (PS: The vue dev tools is not anymore detected):
Here is my file package.json:
{
"name": "ecomm-challenge",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.0-4",
"core-js": "^3.6.5",
"pinia": "^2.0.14",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-cli-plugin-pinia": "~0.1.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
and here you can find my main.js file:
import { createApp } from "vue";
import App from "./App.vue";
import { library } from "#fortawesome/fontawesome-svg-core";
import { faCartShopping } from "#fortawesome/free-solid-svg-icons";
import { createPinia } from "pinia";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
library.add(faCartShopping);
const pinia = createPinia();
createApp(App)
.use(pinia)
.component("font-awesome-icon", FontAwesomeIcon)
.mount("#app");
Here is my github if someone want to check the code: https://github.com/Elsong1120/Ecomm-challenge
Thanks to anyone who will help me.
Had similar issues this is what helped me:
1st create a new file in store folder \store\store.js wich looks like this:
import { createPinia, setActivePinia } from "pinia";
const pinia = createPinia();
setActivePinia(pinia);
export default pinia;
2nd import the pinia (exported from \store\store.js) into your main.js
import { createApp } from 'vue';
import pinia from './stores/store.js';
import App from './App.vue';
const app = createApp(App);
app.use(pinia)
app.mount('#app');
My CSS code that I imported into my Vue project and runs in the "npm run serve" section does not work on my server after "npm run build". What could be the reason for this? When I open the index file in the dist file on the local computer, it says CSS is missing, it does not say any error on the server.
main.js
import Vue from 'vue'
import App from './App.vue'
import VRouter from './router'
import VStore from './configurations/storeConfiguration'
import V18n from './configurations/languageConfiguration'
// Special CSS Library ( UA )
import "./assets/scss/ua.css";
The CSS file that appears appears in the development environment. However, it does not appear in the server environment.
package.json
{
"name": "driver",
"version": "0.1.0",
"private": true,
"sideEffects": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#fortawesome/vue-fontawesome": "^2.0.0",
"axios": "^0.20.0",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.17.3",
"core-js": "^3.6.5",
"epic-spinners": "^1.1.0",
"node-sass": "^4.14.1",
"sass": "^1.27.0",
"sass-loader": "^10.0.3",
"scriptjs": "^2.5.9",
"sweet-modal-vue": "^2.0.0",
"v-mask": "^2.2.3",
"vue": "^2.6.12",
"vue-analytics": "^5.22.1",
"vue-ctk-date-time-picker": "^2.5.0",
"vue-i18n": "^8.22.0",
"vue-input-mask": "0.0.11",
"vue-router": "^3.4.7",
"vue-suggestion": "^1.1.0",
"vue-sweetalert2": "^4.0.0",
"vue-the-mask": "^0.11.1",
"vue-toastification": "^1.7.8",
"vuex": "^3.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
First things first:
npm run serve does not serve the content of your dist file
Check: How to run production site after build vue cli
Would you mind show some code so we can analyse your problem?
I am using the Vue cli to create a vue app with Firebase as my backend.
A file within my app initializes the Firebase DB by referring to environment variables that are defined in .env files.
.env
FIREBASE_API_KEY=#################################
FIREBASE_AUTH_DOMAIN=#################################
FIREBASE_DB_URL=https://#################################
FIREBASE_PROJECT_ID=#################################
FIREBASE_STORAGE_BUCKET=#################################
FIREBASE_MESSAGING_SENDER_ID=#################################
AUTH_API=https://#################################
.env.development.local and .env.production.local contain the same data.
Within my app I have a file that looks like this:
credentials.js
export default {
config: {
apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
databaseURL: process.env.VUE_APP_FIREBASE_DB_URL,
projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID
}
}
When I serve the development version of this app using yarn serve, the database is initialized, so the .env variables are obviously read without a problem. However, when I use yarn build and then serve the resulting files in dist, I get an error on the console:
#firebase/database: FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include databaseURL option when calling firebase.initializeApp().
Which is basically telling me that the environment variables are not being read in production mode.
Here is my package.json:
{
"name": "web-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#firebase/firestore": "^1.9.3",
"axios": "^0.19.0",
"core-js": "^3.3.2",
"element-ui": "^2.12.0",
"feather-icons": "^4.24.1",
"firebase": "^7.2.3",
"firebase-admin": "^8.9.2",
"firebase-functions": "^3.3.0",
"localforage": "^1.7.3",
"node-ipc": "^9.1.1",
"vue": "^2.6.10",
"vue-feather": "^1.0.0",
"vue-feather-icons": "^5.0.0",
"vue-router": "^3.1.3",
"vue2-animate": "^2.1.3",
"vuedraggable": "^2.23.2",
"vuefire": "^2.2.0",
"vuex": "^3.1.1",
"vuex-persist": "^2.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
Can anyone tell me what might be causing this?
You need to prefix your variables with VUE_APP_ in your .env files.
From https://cli.vuejs.org/guide/mode-and-env.html#environment-variables:
Note that only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.
The Issue:
I'm trying to use chrome workspaces / source maps to update my sass partials as I edit CSS in chrome dev tools. Chrome is detecting my sass partials from source maps I setup in webpack, but giving me the error "Changes to this file were not saved to the file system." when I try to save the changes from the sources tab in chrome dev tools.
Moreover, in the styles tab of chrome dev tools, despite chrome knowing which properties are connected to which sass partials, changing the styles there doesn't update the partial files in the sources tab.
Chrome is not communicating changes in my browser to my local files, despite the sass partials showing up as source mapped in the chrome dev tools, and despite me setting up a workstation.
So far:
I set up a workspace in chrome and added the folder for the project
Disabled all my chrome extensions
Made sure 'enable css source maps' was true in chrome settings
I believe the problem might be my webpack config, since this is the first time I've made a custom webpack config, and I basically fiddled around with it until it worked. It could (probably not) be a problem with with a dependency, so I'll also add my package.json file.
Sass partial detected in chrome inspector
Sass partials showing up in sources tab:
Error Message
Webpack config file:
const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: ['#babel/polyfill', './src/index.js'],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
publicPath: '/'
},
devServer: {
contentBase: 'dist',
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/public/index.html'
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.sass$/,
use: [
"style-loader",
{ loader: 'css-loader', options: { sourceMap: true} },
{ loader: 'sass-loader', options: { sourceMap: true } }
],
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
"babel-loader"
]
}
]
}
}
Package.json:
{
"name": "css",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"eslint": "^6.5.1",
"eslint-plugin-react": "^7.16.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
},
"dependencies": {
"#babel/polyfill": "^7.6.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-router-dom": "^5.1.2"
},
"eslintConfig": {
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"env": {
"browser": true,
"node": true
}
},
"eslintIgnore": [
"webpack.config.js"
]
}
This is no longer supported in Chrome :( Relevant issue is marked as "won't fix".
https://bugs.chromium.org/p/chromium/issues/detail?id=996226