在django中部署vue项目,不单独抽离dist文件

时间:2022-04-10 07:48:20

1,在django项目下(app所在目录),新建vue项目,使用脚手架构建vue项目,vue create (项目名)

2,构建好以后,配置django:

    (1),配置settings:

      · 修改templates: 

        TEMPLATES = [
          {
           'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [os.path.join(BASE_DIR,'(vue项目根目录名)/dist')], //只修改这一条,将dist文件路径写入 
     · 添加STATICFILES_DIRS字段:

       STATIC_URL = '/static/'

       STATIC_ROOT = os.path.join(BASE_DIR, '(vue项目根目录名)/dist/static') //static路径需要配置vue,下面会说到(第5点)

       STATICFILES_DIRS = [ os.path.join(BASE_DIR, "(vue项目根目录名)/dist"),]

3,在app视图中添加视图函数,渲染index.html(dist中的html页面)页面:

      def index(request):
       request.META["CSRF_COOKIE_USED"] = True //这个防跨域的
       return render(request,'index.html')
4,url中配置路径:
      path('index/',views.index,name='index'),

5,vue中添加vue.config.js修改dist静态文件路径配置:
      module.exports = {
              // 输出目录
              assetsDir: 'static',
              // 基本路径
              // baseUrl: './',
        }; 6,切换至vue项目所在目录,npm run build,然后将dist/static/静态文件(css,js等文件)抽离值dist目录下,删除static目录。然后即可通过django后端访问vue页面
 注:每次修改vue,都需要重重新build,切抽离静态文件