我如何可以加载在Vue公司的应用程序更改我的代码？

问题描述

我部署一个Django + VueJS的应用程序，使用django webpack loader为了使在我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",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每一次，这需要一些时间，我做的。这是我应该怎么办呢？或者有更短的方法吗？

解决方法

我不知道 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

django django django-webpack-loader vue.js