Задать вопрос
@Alex931
javascript

Как установить и настроить Vue.js?

Здравствуйте. Во время установки Vue.js в терминале не появляется ссылка на localhost. Ввел команду npm run serve. Подскажите, пожалуйста, как это исправить. Во время установки точно следовал обучающему видео.

$ npm run serve

> vue-project@0.1.0 serve
> vue-cli-service serve

INFO Starting development server...
10% building 2/5 modules 3 active ...modules\babel-loader\lib\index.js!C:\Users\Asus\Desktop\Vue\vue-project\src\main.jsError: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at runSyncOrAsync (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
at iterateNormalLoaders (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array. (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at Array. (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.3.0

package.json

{
"name": "project-vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
  • Вопрос задан
  • 297 просмотров
5 комментариев
Подписаться 1 Средний 5 комментариев
Решения вопроса 1
@GrayHorse
Как установить и настроить Vue.js?

С использованием Vite:

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev


Получишь готовый, запущенный проект за несколько секунд.

https://vitejs.dev/guide/#scaffolding-your-first-v...

С yarn (npm install --global yarn) вместо npm это будет заметно быстрее:

yarn create vite my-vue-app --template vue
cd my-vue-app
yarn install
yarn run dev


Чтобы localhost:3000 открывался в браузере автоматически, нужно добавить server.open в vite.config.js

Например:
import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue(),
  ],
  server: {
    open: "/"
  }
});


И, как написано в HelloWorld.vue, в случае VSCode следует установить соответствующий плагин для код ассистанса, подсветки синтаксиса Vue 3.
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
После обновления перестал работать старый сайт на Wordpress
23 нояб. 2024, в 19:29
750 руб./за проект
Развернуть OpenSource софт на сервере
23 нояб. 2024, в 17:32
5000 руб./за проект
Сделать бот программу для браузерной игры
23 нояб. 2024, в 15:17
5000 руб./за проект
Ещё заказы