Импорт модулей узлов из папки priv / static / js в Phoenix 1.4 - PullRequest
Новая
       37

Импорт модулей узлов из папки priv / static / js в Phoenix 1.4

0 голосов
/ 24 февраля 2019

Я установил vuejs с npm install в моей папке assets / и создал файл list_show.js в priv / static / js / list_show.js.Когда я делаю import Vue from "vue" в моем list_show.js, он не работает, и я получаю в консоли следующее сообщение: «Uncaught SyntaxError: Неожиданный идентификатор».

Как я могу импортировать модули в мою папку static / js /?(Я использую Phoenix 1.4 и Webpack по умолчанию)

1 Ответ

0 голосов
/ 26 февраля 2019

Вам не следует создавать файлы .js в каталоге /priv/static/js.Вместо этого используйте каталог /assets.

Phoenix 1.4 использует Webpack для объединения js файлов, расположенных в /assets, в один файл app.js, который будет помещен в /priv/static/js.В качестве точки входа в ваше приложение вы можете использовать /assets/js/app.js, где следующие строки загружают Vue: 

import Vue from 'vue';

new Vue({
  // ...
});

(Вы также можете поместить этот код в отдельный файл .js, если вы импортируетеэто в app.js)

Это решение, однако, не поможет, если вам нужны статические файлы js для разных маршрутов.Возможно, вы захотите всегда отображать priv/static/js/app.js, но конкретные файлы только в определенных макетах.Достижение нескольких выходных файлов в priv/static/js может быть сделано путем незначительного изменения webpack.config.js и добавления дополнительных точек входа: 

entry: {
  app: ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
  special: ['./js/special.js']
},
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../priv/static/js')},
}

С помощью этой конфигурации будут созданы два файла:

  • priv/static/js/app.js - Содержит все файлы поставщика и app.js
  • priv/static/js/special.js - Содержит всего special.js

Файл special.js может быть включен в Phoenix, тогда: 

 <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/special.js") %>"></script>
...