rykener / django-manifest-loader

Simplifies webpack configuration with Django
https://django-manifest-loader.readthedocs.io/
BSD 3-Clause "New" or "Revised" License
104 stars 12 forks source link

How can I use this with Vue.Js? #41

Open engin-can opened 3 years ago

engin-can commented 3 years ago

Any idea how I can use this with Vue.js? I don't know how to set up my vue.config.js...

rykener commented 3 years ago

hi @engin-can, can you provide a bit more information? Are you using webpack to bundle your vue app or are you using vue-cli?

Either way you'll need to modify your configuration to output an asset manifest json file. If you share your current config I might be able to point you in the right direction.

alex-oleshkevich commented 3 years ago

Here is my config file:

const path = require('path');
const ENV = process.env.NODE_ENV || 'development';
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const DEVSERVER_URL = process.env.DEVSERVER_URL || 'http://127.0.0.1:8080';
const assetsDir = 'frontend/src'; // I keep vue app in the ./frontend directory

module.exports = {
    outputDir: path.resolve('dist'),
    publicPath: process.env.NODE_ENV === 'production' ? '/static/' : DEVSERVER_URL,
    devServer: {
        writeToDisk: true,
        disableHostCheck: true,
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
            'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
        },
    },
    chainWebpack(config) {
        config.plugin('webpack-manifest').use(WebpackManifestPlugin);
    },
};