玖叶教程网

之前把vue打包的文件拷贝到django的静态资源目录之后,访问不到文件, 最后发现是django的静态资源目录路径设置的问题,解决方案请参考以下代码

vue.config.js 文件设 置

module.exports = {
    // chainWebpack: config => {
    //   config.plugin("define").tap(args => {
    //     args[0]["process.env"].BASE_URL = JSON.stringify(process.env.BASE_URL);
    //     return args;
    //   });
    // },
    assetsDir: 'static',
    // outputDir:'dist'
    // indexPath: 'static/public/index.html'
    publicPath: './',
    devServer: {
      proxy: {
        '/v1': {
          target: 'http://127.0.0.1:8000',
          changeOrigin: true,
        }
      }
    },
};

django settings.py 设置

STATIC_URL = '/static/'

# 设置静态资源路径, 注意开头不能加 /
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "web/dist/static"),
    os.path.join(BASE_DIR, "web/dist"),
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'web/dist')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]