Как использовать файл, собранный vue-build?

Question

Станислав @stan_b

Vue.js

Как использовать файл, собранный vue-build?

Пытаюсь разобраться с vue.js, в документации не могу найти ответа на вопрос.
vue-build создаёт файл dist/index.js
Как его потом использовать в браузере? Подключение на html страницу через <script src="..."> ничего не даёт. Запуск встроенного сервера vue-build dev мне не нужен, потому что сервер есть свой, на Перле, а vue нужно подключить в шаблон фреймворка.

Вопрос задан более трёх лет назад
608 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

13 комментариев

Dima Polos @dimovich85

Просто сборка готовит это дело для использования на продакшене, и по умолчанию пишет путь от корня.

Написано более трёх лет назад

Станислав @stan_b Автор вопроса

Не работает :( Файл выглядит так:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>vue</title>
           <script src="./js/vue/dist/index.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Скрипт грузится нормально, если смотреть в отладчике браузера.

App.vue

<template>
	<div id="app">
		<h1>My Todo App!</h1>
		<TodoList/>
	</div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
	components: {
		TodoList
	}
}
</script>

<style lang="scss">
@import './variables.scss';

*, *::before, *::after {
	box-sizing: border-box;
}

#app {
	max-width: 400px;
	margin: 0 auto;
	line-height: 1.4;
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: $vue-blue;
}

h1 {
	text-align: center;
}
</style>

Написано более трёх лет назад

Станислав @stan_b Автор вопроса

Да, и через встроенный сервер vue-build dev тоже не работает, при заходе на localhost:8080
появляется Cannot GET /

Написано более трёх лет назад
Dima Polos @dimovich85
Станислав, попробуйте собранный файл подключить перед закрытием body.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue</title> </head> <body> <div id="app"></div> <script src="./js/vue/dist/index.js"></script> </body> </html>
Написано более трёх лет назад
Dima Polos @dimovich85

Станислав, кто писал компонент? Он вообще рабочий сам по себе?

Написано более трёх лет назад
Станислав @stan_b Автор вопроса

Dima Polos, Да, рабочий: https://codesandbox.io/s/o29j95wx9?from-embed

Если подключать после -- тоже не работает.

Написано более трёх лет назад

Станислав @stan_b Автор вопроса

Пробую так сейчас. Вроде пишет, что надо сделать, а вот КАК это сделать -- непонятно.

stan@home:~/projects/cash-your-pic/public/js/vue$ npm run dev

> simple-todo-app-with-vue@0.0.16 dev /home/stan/projects/cash-your-pic/public/js/vue
> node build/dev-server.js

> Starting dev server...


 ERROR  Failed to compile with 1 errors                                                                                    9:49:14 PM

 error  in ./src/App.vue

Module build failed: Error: 

Vue packages version mismatch:

- vue@2.5.3
- vue-template-compiler@2.5.13

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

Написано более трёх лет назад

Dima Polos @dimovich85

Станислав, пишет, что надо обновить модули, попробуйте npm up прописать в консоль, обновить модули.

Написано более трёх лет назад
Станислав @stan_b Автор вопроса
stan@home:~/projects/cash-your-pic/public/js/vue$ npm up simple-todo-app-with-vue@0.0.16 /home/stan/projects/cash-your-pic/public/js/vue └── vue-template-compiler@2.5.13

Почему-то обновляет до этой версии.
Наверное, придётся забить и использовать jQuery или другой фреймворк :(
Написано более трёх лет назад
Станислав @stan_b Автор вопроса

Делаю npm install vue-template-compiler@2.5.3, но устанавливается модуль"_id": "vue-template-compiler@2.5.13"

Написано более трёх лет назад
Станислав @stan_b Автор вопроса
Встроенный сервер удалось поднять, после того, как прописал версию
"dependencies": { "vue": "2.5.13" },

:) Приложение работает, потом ещё попробую вставить в html файл.
Написано более трёх лет назад
Dima Polos @dimovich85

Станислав, так все-таки заработало? После того, как самому vue вручную версию прописал?

Написано более трёх лет назад
Станислав @stan_b Автор вопроса

Заработало, удалось собрать через npm run build, через vue-build devне работает, так что не буду им пользоваться.

Написано более трёх лет назад

Ваш ответ на вопрос

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

Похожие вопросы

Vue.js

Простой
Как прокинуть данные из одного дочернего компонента в другой?
- 1 подписчик
- 22 нояб.
- 106 просмотров
1

ответ
Vue.js

Простой
Как игнорировать клик на компоненте?
- 1 подписчик
- 22 нояб.
- 70 просмотров
1

ответ
Vue.js

+1 ещё

Средний
Как правильно типизировать vue generic components?
- 2 подписчика
- 21 нояб.
- 132 просмотра
1

ответ
Vue.js

Простой
В какую сторону развивается Vue и есть ли ему современные альтернативы?
- 6 подписчиков
- 21 нояб.
- 5573 просмотра
3

ответа
Vue.js

Средний
Как можно вытащить типы пропсов из определения компонента?
- 1 подписчик
- 15 нояб.
- 106 просмотров
1

ответ
Ubuntu

+2 ещё

Простой
Как запустить VueJs в Docker на Ubuntu 14.04?
- 1 подписчик
- 12 нояб.
- 145 просмотров
2

ответа
Vue.js

Средний
Как использовать компонент vue3-draggable без сборщиков?
- 1 подписчик
- 12 нояб.
- 77 просмотров
1

ответ
Node.js

+2 ещё

Средний
Можно ли вернуть помимо статической страницы данные с сервера?
- 1 подписчик
- 08 нояб.
- 133 просмотра
0

ответов
Vue.js

Простой
Как пробросить модификаторы v-model в кастомный инпут?
- 1 подписчик
- 02 нояб.
- 188 просмотров
2

ответа
Vue.js

Простой
Как можно сделать форматирование и вывод JSON в таблице?
- 1 подписчик
- 31 окт.
- 70 просмотров
2

ответа
Показать ещё Загружается…

Frontend Developer (Vue/Nuxt)

tactic.team

от 140 000 до 180 000 ₽

Frontend разработчик (Vue)

Creatium

от 150 000 ₽

😃 Frontend developer Vue 💻📱⌚️

Viletech • Москва

от 150 000 ₽

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

15000 руб./за проект

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

50000 руб./за проект

Разработка мобильного приложения с дополненной реальностью (AR)

25 нояб. 2024, в 23:32

200000 руб./за проект

Answer 1 · 2018-02-10 17:03:35

Файл index.js просто подключите к html и все, главное, чтобы в html был какой-то элемент, который является точкой монтирования, короче например div с id "app", тот селектор, который передан в поле el в экземпляре vue. Это первое условие, и второе, видимо ничего не работает, потому что путь в script src начинается со слеша, то есть от корня диска, если это на локалке, подключите <script src="./dist/index.js"></script>, то есть перед слешом поставьте точку, то есть от текущей директории искать файл.

Как использовать файл, собранный vue-build?

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

Минуточку внимания

Войдите на сайт