I am facing this issue…
I am working on a project using Flask and Vue, and I am having trouble with the front end. I am using Vue Cli with Babel and router packages.
Now I am trying to make a vue view file.
-
I start my server.
-
make changes (e.g. changing some text, style, etc.)
-
I am not able to see the changes without stopping the server and starting again manually. On average, it takes 5 to 20 minutes.
Is there a way for the Vue server to automatically update itself, as I code?
I am new to Vue, and this is for a college project. I am told that the server detects changes automatically and updates them, but that is not happening in my case.
I am sharing my config files here.
App.vue:
<template>
<router-view/>
</template>
<style scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
babel.config.js:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
jsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
pacakge.json:
`{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
`
vue.config.js:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
I have created 3+ vue projects, but the result is the same, I am not sure what other dependencies to install.
Please help me out, thanks!