Q&A
前提・実現したいこと
初めまして、Vueでアプリのフロント開発をしているものです。
pythonとvueを連携させる必要があり
https://qiita.com/YuzuRyo61/items/ab20be891bd1b36daff7
↑を参考に連携を試みましたがpython manage.py runserverをすると
Traceback (most recent call last): File "C:\Users\kurita-h\AppData\Local\Programs\Python\Python310\lib\site-packages\django\apps\config.py", line 243, in create app_module = import_module(app_name) File "C:\Users\kurita-h\AppData\Local\Programs\Python\Python310\lib\importlib\__init__.py", line 126, in import_module return _bootstrap._gcd_import(name[level:], package, level) File "<frozen importlib._bootstrap>", line 1050, in _gcd_import File "<frozen importlib._bootstrap>", line 1027, in _find_and_load File "<frozen importlib._bootstrap>", line 1004, in _find_and_load_unlocked ModuleNotFoundError: No module named 'api' During handling of the above exception, another exception occurred: Traceback (most recent call last): File "C:\Users\kurita-h\app\manage.py", line 22, in <module> main() File "C:\Users\kurita-h\app\manage.py", line 18, in main execute_from_command_line(sys.argv) File "C:\Users\kurita-h\AppData\Local\Programs\Python\Python310\lib\site-packages\django\core\management\__init__.py", line 425, in execute_from_command_line utility.execute()
というエラーが出てうまく動かないという問題が発生してしまいました。
該当のソースコード
webpack.config.js
1var path = require("path"); 2var webpack = require('webpack'); 3var BundleTracker = require('webpack-bundle-tracker'); 4var VueLoaderPlugin = require('vue-loader/lib/plugin'); 5 6 7module.exports = { 8 context: __dirname, 9 mode: process.env.NODE_ENV, 10 entry: { 11 main: './src-front/main.js' 12 }, 13 14 output: { 15 filename: "[name]-[hash].js", 16 path: path.resolve('./static/build/') 17 }, 18 19 plugins: [ 20 new BundleTracker({ 21 path: '.', 22 filename: 'webpack-stats.json' 23 }), 24 25 new VueLoaderPlugin() 26 ], 27 28 module: { 29 rules: [ 30 { 31 test: /.js$/, 32 loader: 'babel-loader' 33 }, 34 { 35 test: /.vue$/, 36 loader: 'vue-loader' 37 }, 38 { 39 test: /.scss$/, 40 use: [ 41 'style-loader', 42 'css-loader', 43 'sass-loader' 44 ] 45 }, 46 { 47 test: /.css$/, 48 use: [ 49 'vue-style-loader', 50 'style-loader', 51 { 52 loader: 'css-loader', 53 options: { 54 url: false, 55 sourceMap: true 56 } 57 } 58 ] 59 } 60 ] 61 }, 62 63 resolve: { 64 extensions: ['.js', '.vue'], 65 modules: [ 66 'node_modules' 67 ], 68 alias: { 69 'vue': path.resolve('./node_modules/vue/dist/vue.js') 70 } 71 } 72}
settings/base.py
1INSTALLED_APPS = [ 2 # ... 3 'webpack_loader', 4] 5 6DEBUG = True 7WEBPACK_LOADER = { 8 'DEFAULT': { 9 'CACHE': not DEBUG, 10 'BUNDLE_DIR_NAME': 'build/', 11 'TIMEOUT': None, 12 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), 13 'IGNORE': [r'.+.hot-update.js', r'.+.map'] 14 } 15} 16 17STATICFILES_DIRS = [ 18 os.path.join(BASE_DIR, 'static') 19]
package.json
1"scripts": { 2 "serve": "vue-cli-service serve", 3 "lint": "vue-cli-service lint", 4 "dev": "webpack --mode development --progress", 5 "build": "webpack --mode production --progress", 6 "watch": "webpack --watch -d --progress" 7 },
template/base.html
1{% load render_bundle from webpack_loader %} 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <title>django_vuejs</title> 7 {% render_bundle 'main' 'css' %} 8 </head> 9 <body> 10 <noscript> 11 <p>Your browser is disabled JavaScript. To use this web application, please enable JavaScript.</p> 12 </noscript> 13 <div id="app"></div> 14 {% render_bundle 'main' 'js' %} 15 </body> 16 </head> 17</html>
src/main.js
1import Vue from 'vue' 2import App from './App.vue' 3import router from './router' 4import store from './store' 5import VModal from 'vue-js-modal' 6 7Vue.config.productionTip = false, 8Vue.use(VModal) 9 10new Vue({ 11 router, 12 store, 13 // webpack 14 template: "<App/>", 15 components: { App }, 16 17 render: h => h(App), 18}).$mount('#app')
補足情報（FW/ツールのバージョンなど）
'CACHE': not DEBUG, NameError: name 'DEBUG' is not defined
というエラーが出たため
DEBUG = True
を入れたところこのエラーが出ました。
この問題の解決方法をご存じの方ご教授ください。
あなたの回答
tips
プレビュー
