前提・実現したいこと
当方、VueCLIを使用して作成したプロジェクトをFlaskで動かすWebアプリケーションを作成しております。
今回、VueのプロジェクトにVuetifyを導入するため、以下のコマンドを用いてインストールを行いました。
vue add vuetify
発生している問題・エラーメッセージ
しかし、開発用サーバを起動してアクセスするとVuetifyが動作しませんでした。
一度、npm buildを行い出力されたdistファイルの中身をFlaskの本番サーバに配置して起動すると、Vuetifyが正常に動作しています。
こちらが、一度buildしたものをFlaskで動作されているものになります。
1枚目のロゴ画像等が正常に表示されておらず、レイアウトが崩れているのは開発サーバを基準にCSSを記述したものが、Vuetifyが有効となったことにより競合したことが原因だと思います。
2枚目はVuetifyのv-cardを設定した状態です。
buildの際や、開発サーバでDev toolを起動して確認した歳に、エラーメッセージは表示されていません。
以下がソースコードの該当箇所です。
package.json
json
1{ 2 "name": "my-project", 3 "version": "0.1.0", 4 "private": true, 5 "scripts": { 6 "serve": "vue-cli-service serve", 7 "build": "vue-cli-service build", 8 "lint": "vue-cli-service lint" 9 }, 10 "dependencies": { 11 "axios": "^0.19.2", 12 "core-js": "^3.6.4", 13 "vue": "^2.6.11", 14 "vue-router": "^3.1.6", 15 "vuetify": "^2.2.11", 16 "vuex": "^3.1.3", 17 "vuetify-loader": "^1.3.0" 18 }, 19 "devDependencies": { 20 "@vue/cli-plugin-babel": "~4.3.0", 21 "@vue/cli-plugin-eslint": "~4.3.0", 22 "@vue/cli-plugin-router": "~4.3.0", 23 "@vue/cli-plugin-vuex": "~4.3.0", 24 "@vue/cli-service": "~4.3.0", 25 "babel-eslint": "^10.1.0", 26 "eslint": "^6.7.2", 27 "eslint-plugin-vue": "^6.2.2", 28 "sass": "^1.19.0", 29 "sass-loader": "^8.0.0", 30 "vue-cli-plugin-vuetify": "~2.0.5", 31 "vue-template-compiler": "^2.6.11", 32 "vuetify-loader": "^1.3.0" 33 } 34}
main.js
js
1import Vue from 'vue' 2import App from './App.vue' 3import router from './router' 4import store from './store' 5import vuetify from './plugins/vuetify'; 6 7Vue.config.productionTip = false 8 9new Vue({ 10 router, 11 store, 12 vuetify, 13 render: h => h(App) 14}).$mount('#app')
App.vue
vue
1<template> 2 <v-app> 3 <router-view/> 4 </v-app> 5</template> 6 7<script> 8export default { 9 name: 'App', 10 data: () => ({ 11 // 12 }), 13}; 14</script> 15<style> 16#app { 17 font-family: Avenir, Helvetica, Arial, sans-serif; 18 -webkit-font-smoothing: antialiased; 19 -moz-osx-font-smoothing: grayscale; 20 text-align: center; 21 color: #2c3e50; 22} 23 24#nav { 25 padding: 30px; 26} 27 28#nav a { 29 font-weight: bold; 30 color: #2c3e50; 31} 32 33#nav a.router-link-exact-active { 34 color: #42b983; 35} 36</style>
なにか原因等あれば、ご教授いただけると幸いです。
ほぼソースコードのみの質問となってしまい恐縮ですが、よろしくお願いいたします。
あなたの回答
tips
プレビュー