Question

我正在学习将Vue.js集成到Django项目（多页面应用程序）中。我的目标是能够在项目中的不同应用程序之间拆分我的前端代码

但是，我无法从我的个人资料应用中创建Vue实例，因为webpack在导入过程中无法找到Vue。

错误

ERROR in ../apps/profiles/frontend/profiles/browse.js
Module not found: Error: Can't resolve 'vue' in '/home/me/dev/myproject/apps/profiles/frontend/profiles'

我的django项目结构（截断）

manage.py
myproject/
    webpack.config.js
    frontend/
        home.js
        components/
            Home.vue
    node_modules/
apps/
    profiles/
        frontend/
            profiles/
                browse.js

webpack.config.js中的多个入口点

entry: {
    'vendor': [
        "vue",
        "vue-resource",
    ],

    'home': [
        './frontend/home.js',
        'webpack/hot/only-dev-server',
        'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
    ],

    'profiles_browse': [
        '../apps/profiles/frontend/profiles/browse.js',
        'webpack/hot/only-dev-server',
        'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
    ],
},

此外，vue在webpack.config.js中被解析为别名

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.common.js',
    },
},

我的browse.js Vue实例

import Vue from 'vue' <-- Error occurs here


new Vue({
    el: '#browse',

    data: {
        foobar: "hello browse"
    },

    delimiters: [
        "[[", "]]"
    ]
});

最后我的django模板用于个人资料浏览

<div id="browse">
    [[ foobar ]]
</div>
{% render_bundle 'vendor' %}
{% render_bundle 'profiles_browse' %}

我曾经想过，因为vue定义了一个别名，我可以从任何地方导入它。

有没有人对如何最好地使用webpack拆分跨越项目中不同目录的模块有任何建议？

Answer 1

我从blog post发现的成功方法是使用npm将我的Django应用程序的js模块安装到我项目的node_modules目录中。

例如，在我的项目package.json中，我将以下file引用添加到我的依赖项中：

"dependencies": {
  "profiles": "file:../apps/profiles/frontend",
  ...
},

如果apps/profiles/frontend已定义了自己的package.json文件，这将有效。

现在我的项目的webpack.config.js入口点将是：

entry: {
    'vendor': [
        "vue",
        "vue-resource",
    ],

    'home': [
        './frontend/home.js',
        'webpack/hot/only-dev-server',
        'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
    ],

    'profiles_browse': [
        './node_modules/profiles/browse.js',
        'webpack/hot/only-dev-server',
        'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
    ],
},

请注意，profiles_browse是指node_modules内的文件。

在我的browse.js文件中，我可以无误地导入Vue。

Webpack - 无法从保存在另一个目录中的实例导入Vue

1 个答案: