使用前缀从 node_modules 导入 Vue

Question

我正在 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>

JS

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

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

有效！但据我所知，这是没有意义的：我使用 npm.

在本地安装它时，我使用了来自 CDN 的 Vue.js

如果删除 <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

Answer 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>

行。

使用前缀从 node_modules 导入 Vue

import Vue from node_modules using a prefix

vue.js

codeigniter

npm

phpstorm