Webpack - 无法从保存在另一个目录中的实例导入 Vue [英] Webpack - Cannot import Vue from instance saved in another directory

问题描述

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

但是，我无法从我的配置文件应用程序创建 Vue 实例，因为 webpack 在导入期间无法找到 Vue.

错误

 ../apps/profiles/frontend/profiles/browse.js 中的错误找不到模块:错误:无法解析/home/me/dev/myproject/apps/profiles/frontend/profiles"中的vue"

我的django项目结构(截断)

manage.py我的项目/webpack.config.js前端/主页.js成分/主页.vue节点模块/应用/简介/前端/简介/浏览器

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

条目:{'小贩': ["vue","vue-资源",],'家': ['./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，],},

也在 webpack.config.js 中将 vue 解析为别名

解析:{别名:{'vue$': 'vue/dist/vue.common.js',},},

我的 browse.js Vue 实例

import Vue from 'vue' <-- 这里发生错误新的 Vue({el: '#browse',数据: {foob​​ar: "你好浏览"},分隔符: ["[[", "]]"]});

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

[[ foobar ]]
{% render_bundle '供应商' %}{% render_bundle 'profiles_browse' %}

我曾想，既然 vue 定义了一个别名，我就可以从任何地方导入它.

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

解决方案

我从 博文 是使用 npm 将我的 Django 应用的 js 模块安装到我项目的 node_modules 目录中.

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

依赖项":{"profiles": "file:../apps/profiles/frontend",...},

如果 apps/profiles/frontend 已经定义了它自己的 package.json 文件，这将起作用.

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

条目:{'小贩': ["vue","vue-资源",],'家': ['./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.

I am learning to integrate Vue.js in to a Django project (multi-page application). My goal is to be able to split my frontend code up among my different apps within my project

However, I am unable to create a Vue instance from my profiles app because webpack fails to find Vue during import.

The error

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'

My django project structure (truncated)

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

Multiple entry points in 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,
    ],
},

Also vue is resolved as an alias in webpack.config.js

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

My browse.js Vue instance

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


new Vue({
    el: '#browse',

    data: {
        foobar: "hello browse"
    },

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

And finally my django template for profiles browse

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

I had thought that since vue has an alias defined that I would be able to import it from anywhere.

Does anyone have any suggestions on how to best use webpack to split up modules spanning different directories within a project?

解决方案

A successful approach that I discovered from a blog post is to use npm to install my Django app's js modules into my project's node_modules directory.

For instance, in my project's package.json I add the following file reference to my dependencies:

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

This will work if apps/profiles/frontend has defined its own package.json file.

Now my project's webpack.config.js entry points will be:

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,
    ],
},

Notice that profiles_browse refers to a file within node_modules.

Within my browse.js files I can import Vue without error.

这篇关于Webpack - 无法从保存在另一个目录中的实例导入 Vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！