时间戳

首页 > 解决方案 > 使用前缀从 node_modules 导入 Vue

vue.js - 使用前缀从 node_modules 导入 Vue

问题描述

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

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

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')

有用！但据我所知，这没有任何意义：我使用Vue.jsCDN，而我在本地使用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.jscodeigniternpmphpstorm

解决方案

您正在混合客户端 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 文件中导入的模块，并准备一个新的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>

线。

推荐阅读