如何在 Vue 应用程序中加载对代码的更改？

Question

我部署了一个使用 django webpack loader 的 Django+VueJS 应用程序，以便在我的 Django 模板中呈现 Vue 应用程序。我使用 Nginx 和 Gunicorn 将应用程序部署到 DigitalOcean VPS，一切正常，但我对如何在生产中编辑我的组件有一些疑问，因为我对 Vue

还很陌生

这是我的 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": ["*"]})

    }
};

所以为了部署 Vue 部分，我做了 npm run build 并且 npm 在我的静态目录中创建了一堆文件。现在，每次我编辑一个组件，为了在网络上看到变化，我每次都做 npm run build，这需要一些时间。这是我应该怎么做吗？或者有更短的路吗？

Answer 1

我不知道 django，但我知道 vue..

我应该怎么做？

对我来说，我不建议这样做，你可以使用你的django作为你前端的后端那应该意味着您将拥有 2 台服务器运行。 1 个用于您的 django，1 个用于您的 vue 应用程序。使用 XHR 请求访问你的 django 应用程序，记得处理 CORS。恕我直言，我不想将 vue 用作基于组件的框架。

有没有更短的路

是的，这就是你的做法。

添加到 package.json

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

同时在 vue.config.js

中使用以下设置

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

我忘记了 publicPath 和 outputDir 是如何工作的..

不过你可以在这里查看 https://cli.vuejs.org/config/#publicpath

关于 package.json 文件中的代码..

你可以在这里查看

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

如何在 Vue 应用程序中加载对代码的更改？

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

django

vue.js

django-webpack-loader