无法解决生产中的模块说明符“vue”错误

Question

我正在尝试在 digitalocean 服务器上部署我的 vue.js 应用程序。我已经使用 npm create vue@latest 命令创建了 vue 应用程序。它在本地运行没有错误，即使我运行 npm run build 然后运行 npm run Preview，也没有错误，应用程序运行完美。然而，当我将其托管在服务器上时，我收到此错误：

Uncaught TypeError: Failed to resolve module specifier "vue".
Relative references must start with either "/", "./", or "../".

在服务器上，这是我采取的步骤： 在项目目录下，运行

1. 卷曲https://deb.nodesource.com/setup_16.x |须藤bash

2. sudo apt安装nodejs

3. npm 安装

4. npm 运行构建

我错过了什么吗？我花了几个小时寻找问题，但找不到任何答案。 这是 package.json 文件：

{
  "name": "front",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@vee-validate/i18n": "^4.12.6",
    "@vee-validate/rules": "^4.12.6",
    "axios": "^1.6.8",
    "vee-validate": "^4.12.6",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-prettier": "^8.0.0",
    "autoprefixer": "^10.4.18",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "postcss": "^8.4.37",
    "prettier": "^3.0.3",
    "tailwindcss": "^3.4.1",
    "vite": "^5.1.6"
  }
}

这是 nginx 配置 /etc/nginx/sites-enabled/digitalocean:

server {
        listen 80 default_server;
        listen [::]:80 default_server ipv6only=on;

        root /var/www;
        index index.php index.html index.htm;

        # Make site accessible from http://localhost/
        server_name localhost;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
                # Uncomment to enable naxsi on this location
                # include /etc/nginx/naxsi.rules
        }

        error_page 404 /404.html;
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
                root /usr/share/nginx/html;
        }

        location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.0-fpm.sock;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #       deny all;
        #}
}

/var/www/front 是我的目录的路径。 我将不胜感激任何帮助！

Answer 1

我在单个网页上使用 vue 3 时遇到了同样的问题。解决方案位于 vue 入门页面。

vue 入门#使用 ES 模块构建（阅读说明）

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

你可以在 html 页面中使用它，它会起作用。

您可以在 CodePen 上进行测试。