Question

我正在将Django与Webpack和Vue一起使用，并在Webpack中拆分代码。 Webpack从.vue文件的源代码中拆分了块文件。但是，我无法在Web浏览器上加载块文件，因为url在我的项目结构中不正确。我想更改块文件的加载URL，但我不知道这些。如何更改块文件的加载URL？

Chrome控制台日志：

GET http://localhost:8123/mycomponent.chunk.js 404 (Not Found)
main.js:12 Error: Loading chunk 2 failed.
(error: http://localhost:8123/mycomponent.chunk.js)
    at HTMLScriptElement.a (main.js:1)

我需要'/static/js/mycomponent.chunk.js'的网址。

webpack.config.js：

const path = require("path")
const webpack = require('webpack')
const BundleTracker = require('webpack-bundle-tracker')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
context: __dirname,

entry: './src/main.js',

output: {
    path: path.resolve('../static/js/'),
    filename: "[name].js",
    chunkFilename: '[name].chunk.js',
},

module: {
    rules: [
    {
        test: /\.vue$/,
        loader: 'vue-loader'
    },
    ],
},

plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
    new VueLoaderPlugin(),
],

resolve: {
    alias: {
    'vue': path.resolve('./node_modules/vue/dist/vue.js'),
    }
},
}

Answer 1

尝试将publicPath: '/static/js/'添加到输出中。

此外，如果您从Django模板页面提供js，则可以使用django-webpack-loader，它可以简化js文件的提供并支持热模块重新加载。

Django + Webpack + Vue +代码拆分-如何更改块文件的加载URL

1 个答案: