vue init webpack 卡住_Django+Vue前后端分离项目构建总结[Production/Develpment mode]

最新推荐文章于 2024-05-25 09:38:25 发布

weixin_39912580

最新推荐文章于 2024-05-25 09:38:25 发布

阅读量112

点赞数

文章标签： vue init webpack 卡住

引言
最近打算做一个项目，建一个前后端分离的网页开发框架。琢磨来琢磨去，最后选了Django+Vue.js 为什么这么选呢？
Django嘛，可以快速开发安全和可维护的网站，并且免费且开源。三分钟就可以运行起来一个默认网页，对新手不要太友好。
Vue.js是一套用于构建用户界面的渐进式框架。对前端开发者来说易于上手，且功能强大，代码清晰，另外结合支持类库可以为复杂的单页应用提供驱动。

操作步骤：

[1]配置Django，运行起来

[2]配置Vue.js，运行起来

[3]整合！！(对Djnago 和Vue都已经跑起来的同学们可以直接看整合)

3.1是在development mode下的整合，3.2是在production mode下的整合（至于两个mode下有什么区别，推荐查阅官网哦）不想看教程的同学直接拉到底部可以下载代码哦~

环境

操作系统：Windows 10

后端：Python3，Django==3.0.5 django-webpack-loader==0.7.0 djangorestframework asgiref==3.2.7 pytz==2019.3 sqlparse==0.3.1

前端：Vue.js webpack-bundle-tracker vue/cli

「1」.Django环境配置

构建介绍不要太多，这里附一个官方教程。

Djangodocs.djangoproject.com

简单来说就是，先下载：

python -m django --version

然后创建一个项目：

django-admin startproject backend

你就会拥有一个名叫backend的Django APP，

结构大约如下所示：

backend/
|
|____ backend/             # root backend
|    |____ __init__.py
|    |____ settings.py
|    |____ urls.py
|    |____ views.py
|____ templates     
|____ manage.py
|____......

在你的IDE运行一下或命令行输入：

python manage.py runserver

项目运行成功后，会提示你访问URL查看结果。一般是http://127.0.0.1:8000，现在打开这个地址，你就能看见Django的默认网页：

「2」. Vue.js环境配置

Vue.js的文档也很多，这里贴一个比较官方的

Vue Installationvuejs.org

如果你有npm环境那么直接：

npm install vue

然后创建一个App

vue create frontend

然后进入到前端文件路径下：/frontend

cd frontend

在这个路径下你需要下载node dependencies：

npm install

其他包：

npm install -g @vue/cli @vue/cli-service-global 
npm install webpack-bundle-tracker@0.4.3

这里：webpack-bundle-tracker最好标明0.4.3版本。因为这个版本是最新释放的稳定版本，如果不标注那么下载到webpack-bundle-tracker@1.0.0-alpha.1 的话，可能会造成一些无法查明原因的错误。这里可以在frontend里试一下运行：

npm run serve

就可以得到Vue.js的默认网页咯

这里的工程结构如下

my_project/
|
|____ backend/             # root backend
|    |____ __init__.py
|    |____ settings.py
|    |____ urls.py
|    |____ views.py
|____ templates 
|
|____ frontend/               # root frontend
|    |____ src/               # vue components, router, store, etc.
|    |____ node_modules/
|    |____......
|
|____ manage.py
|____......

「3」. 整合

整合方法有很多。（这篇文章我说了太多很多......这资料真的很多）

我选了两种方式来整合。

3.1是在development mode下的整合，3.2是在production mode下的整合（至于两个mode下有什么区别，推荐查阅官网哦）

「3.1」. 整合（development mode）

首先在Vue.js的development mode下(也就是你运行npm run serve)后的状态。

打开frontend/vue.config.js文件(如果没有的话创建一个)，粘贴下面内容：

const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
  // 如果不在windows环境请试下: "http://0.0.0.0:8080/"
  publicPath: "http://127.0.0.1:8080",
  outputDir: "./dist/",

  chainWebpack: (config) => {
    config
      .plugin("BundleTracker")
      .use(BundleTracker, [{ filename: "./webpack-stats.json" }]);

    config.output.filename("bundle.js");

    config.optimization.splitChunks(false);

    config.resolve.alias.set("__STATIC__", "static");

    config.devServer
      // the first 3 lines of the following code have been added to the configuration
      .public("http://127.0.0.1:8080")
      .host("127.0.0.1")
      .port(8080)
      .hotOnly(true)
      .watchOptions({ poll: 1000 })
      .https(false)
      .disableHostCheck(true)
      .headers({ "Access-Control-Allow-Origin": ["*"] });
  }
};

然后跑一下：

npm run serve

这样你就会在当前目录下得到一个配置文件webpack-stats.json。

配置backend/settings.py:

INSTALLED_APPS = [
         ...
    'rest_framework',
    'webpack_loader',
]
    .
    .
    .
TEMPLATES = [
    {               ...

        'DIRS': [os.path.join(BASE_DIR, 'templates')],
                    ...
    },
]
    .
    .
    .

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/src/assets"),
    os.path.join(BASE_DIR, "frontend/dist"),
]
WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json')
    }
}

在templates下创建一个index.html file

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- This part is in the screenshot at the bottom! -->
    <h1>Vue JS</h1>
    <div id="app"></div>
    {% render_bundle 'app' %}
  </body>
</html>

在backend/views.py下配置页面：

from django.conf import settings
from django.views.generic.base import TemplateView

class IndexTemplateView(TemplateView):
    def get_template_names(self):
        template_name = "index.html"
        return template_name

最后配置backend/url.py

from django.urls import re_path
from core.views import IndexTemplateView
urlpatterns = [
    ...
    re_path(r"^.*$", IndexTemplateView.as_view(), name="entry-point"),
]

大功告成！！现在分别运行vue和Django项目。Django可以打开Vue的默认界面了！

npm run serve
python manage.py runserver

附GitHub链接：

Lyiyian/Django-vue-servegithub.com

「3.2」. 整合（production mode）

在Vue的production mode下(就是运行npm run build的状态)，我们同样可以整合。

不过有大神已经写得挺好了。按照 @UCloud云计算的文章来配置就可以很好得进行了

UCloud云计算：我如何使用 Django + Vue.js 快速构建项目zhuanlan.zhihu.com

附GitHub链接：

Lyiyian/vue_Djangogithub.com

另外跨域问题也有解决 @Normal WLS

Normal WLS：手把手Django+Vue前后端分离开发入门(附demo)zhuanlan.zhihu.com

「4」. 总结

开发资料多如牛毛，只有你想不到，没有你找不到。

那么，奔涌吧，程序员。

Development mode下整合：

Lyiyian/Django-vue-servegithub.com

Production mode下整合：

Lyiyian/vue_Djangogithub.com

weixin_39912580

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue init webpack 卡住_Django+Vue前后端分离项目构建总结[Production/Develpment mode]

引言最近打算做一个项目，建一个前后端分离的网页开发框架。琢磨来琢磨去，最后选了Django+Vue.js为什么这么选呢？Django嘛，可以快速开发安全和可维护的网站，并且免费且开源。三分钟就可以运行起来一个默认网页，对新手不要太友好。Vue.js是一套用于构建用户界面的渐进式框架。对前端开发者来说易于上手，且功能强大，代码清晰，另外结合支持类库可以为复杂的单页应用提供驱动。操作步骤：[1]配置D...
复制链接

扫一扫