How can i load changes to my code in a Vue app?

Question

I deployed a Django+VueJS app that uses django webpack loader in order to render Vue apps in my Django templates. I used Nginx and Gunicorn to deploy the app to a DigitalOcean VPS, everything works without any problem but i have some doubts on how to edit my components in production, since i'm fairly new to Vue

Here is my vue.config:

const BundleTracker = require("webpack-bundle-tracker");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;


const pages = {
    'main': {
        entry: './src/main.js',
        chunks: ['chunk-vendors']
    },

}

module.exports = {
    pages: pages,
    runtimeCompiler: true,
    filenameHashing: false,
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production'
        ? 'static/vue'
        : 'http://localhost:8080/',
    outputDir: '../django_vue_mpa/static/vue/',

 
    

    chainWebpack: config => {

        config.optimization
            .splitChunks({
                cacheGroups: {
                    moment: {
                        test: /[\\/]node_modules[\\/]moment/,
                        name: "chunk-moment",
                        chunks: "all",
                        priority: 5
                    },
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "chunk-vendors",
                        chunks: "all",
                        priority: 1
                    },
                },
            });

        Object.keys(pages).forEach(page => {
            config.plugins.delete(`html-${page}`);
            config.plugins.delete(`preload-${page}`);
            config.plugins.delete(`prefetch-${page}`);
        })

        config
            .plugin('BundleTracker')
            .use(BundleTracker, [{filename: '../vue_frontend/webpack-stats.json'}]);


        // Uncomment below to analyze bundle sizes
        // config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin);
        
        config.resolve.alias
            .set('__STATIC__', 'static')

        config.devServer
            .public('http://localhost:8080')
            .host('localhost')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({"Access-Control-Allow-Origin": ["*"]})

    }
};

So in order to deploy the Vue part i did npm run build and npm created a bunch of files in my static directory. Now, every time i edit a component, in order to see the changes on the web, i do npm run build every time, which takes some time. Is this how am i supposed to do it? Or is there a shorter way?

The shorter way is to develop and serve locally (`npm run serve`). Once you're happy with the result, you build & deploy. — tao, Jan 09 '21 at 23:13

score 1 · Accepted Answer · answered Jan 10 '21 at 09:14

I don't know about django, But I know about vue..

is this how am I supposed to do it?

For me, I don't suggest it, you can use your django as a backend for your frontend that should mean you would have 2 servers running. 1 for your django and 1 for your vue app. use XHR request to access your django App, remember to handle CORS. IMHO I don't want vue to be used as a component based framework.

is there a shorter way.

YES, and this is how you do it.

add to package.json

{
  ...,
  scripts: {
    ...,
    'watch' : 'vue-cli-service build --watch --inline-vue',
    ...,
  }
}

while using the following settings in vue.config.js

module.exports = {
  'publicPath': '/django/path/to/public/folder',
  'outputDir': '../dist',
  'filenameHashing': false,
  runtimeCompiler: true,
  'css': {
    extract: true,
  },
}

i forgot about how publicPath and outputDir works..

but you can check it out here https://cli.vuejs.org/config/#publicpath

regarding the code on the package.json file..

you can check it here

https://github.com/vuejs/vue-cli/issues/1120#issuecomment-380902334

How can i load changes to my code in a Vue app?

1 Answers1