使用前缀从 node_modules 导入 Vue答案

【问题标题】：import Vue from node_modules using a prefix使用前缀从 node_modules 导入 Vue
【发布时间】：2021-07-25 15:18:27
【问题描述】：

我正在使用以下工具在 Ubuntu 20.04 下设置我的开发环境：

PhpStorm 2020.3 作为 IDE
CodeIgniter v4
Vue 3.x
顺风 CSS+UI

我创建了一个测试项目并遵循我所做的文档：

npm install tailwindcss@latest
npm install @headlessui/vue @heroicons/vue
npm install vue@next

以及其他创建 CodeIgniter 项目骨架的东西。然后我写了一个简单的“Hello World”Vue 应用程序：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="output.css" type="text/css" rel="stylesheet" />
    <script src="https://unpkg.com/vue@next"></script>
    <script type="module" src="test1.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    {{ message }}
</div>

</body>
</html>

const HelloVueApp = {
    data() {
        return {
            message: 'Hello Vue!!'
        }
    }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')

有效！但据我了解，这没有任何意义：我使用 CDN 中的 Vue.js，而我使用 npm 在本地安装它。

如果我删除 <script src="https://unpkg.com/vue@next"></script> 行，我需要先导入 Vue，然后才能使用它。

它包含在node_modules 文件夹下。所以我尝试了：

import Vue from "/node_modules/vue/dist/vue.cjs.js"

还有：

import Vue from "../node_modules/vue/dist/vue.cjs.js"

但在这两种情况下，它都找不到文件（错误 404）。正确的语法是什么？

文件当然存在，如果我从项目的根文件夹中键入：

$ ls node_modules/vue/dist/vue.cjs.js
node_modules/vue/dist/vue.cjs.js

【问题讨论】：

Vue 不应该在没有构建步骤的情况下使用。它本身可以工作，但第三方库通常不能。除了 Vue，客户端库还没有准备好与 <script type="module" 这样的原生 ES 模块一起使用。 import Vue from "../node_modules/vue/dist/vue.cjs.js" - 你正在尝试在 ES 模块中使用 CommonJS 模块。这不适用于原生 ES 模块。

标签： vue.js codeigniter npm phpstorm

【解决方案1】：

您正在混合客户端 JavaScript 和服务器端 JavaScript。

node_modules 目录位于您的服务器中，因此对客户端不可用，客户端是请求您的初始 html 的客户端。当你这样做时

<script src="https://unpkg.com/vue@next"></script>
<script type="module" src="test1.js"></script>

您正在使客户端 js 可以访问 Vue，因为它是从 https://unpkg.com/vue@next 导入的。如果你想避免这种情况并使用你的 npm 包，你需要使用像 webpack 这样的捆绑器。它将查看您在您编写的 js 文件中导入的模块，并准备一个 new js 文件，该文件将包含所有需要的东西（您的代码和 vue 模块代码）。
如果您正确设置了所有内容，您应该能够最终编写一个 js 文件：

import Vue from "vue"

const HelloVueApp = {
    data() {
        return {
            message: 'Hello Vue!!'
        }
    }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')

不需要

<script src="https://unpkg.com/vue@next"></script>

行。

【讨论】：

知道了。我读到了webpack，但我认为我不需要它。感谢您指出。