0

我部署了一个使用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每次都这样做，这需要一些时间。这是我应该怎么做的吗？还是有更短的方法？

4

1 回答 1

1

我不了解 django，但我了解 vue..

  1. 这是我应该怎么做的吗？

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

  1. 有没有更短的方法。

是的，这就是你的做法。

添加到 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

于 2021-01-10T09:14:27.273 回答