0
J'essaie d'utiliser vue.js et vue-loader dans mon application Phoenix Framework avec le gestionnaire d'actifs de brunch par défaut. Bien sûr - je peux passer au webpack, mais je voudrais résoudre ce problème sous le brunch.Est-il possible de travailler avec vue-loader sous le brunch?
Je suit app.js
import App from './App.vue'
new Vue({
el: 'body',
components: { App }
})
App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
<p>hot reloading</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
et brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
},
vue: {
extractCSS: true,
out: 'priv/static/css/components.css'
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true,
whitelist: ["phoenix", "phoenix_html", "vue"],
globals: {
Vue: "vue/dist/vue.common.js",
Vuex: "vuex/dist/vuex.min.js",
Axios: "axios/dist/axios.min.js",
VueAxios: "vue-axios/dist/vue-axios.min.js"
},
}
};
et package.json
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"axios": "^0.16.2",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"postcss-brunch": "^2.0.5",
"vue": "^2.3.4",
"vue-axios": "^2.0.2",
"vueify": "^9.4.1",
"vuex": "^2.3.1"
},
"devDependencies": {
"babel-brunch": "~6.0.0",
"brunch": "2.7.4",
"clean-css-brunch": "~2.0.0",
"css-brunch": "~2.0.0",
"javascript-brunch": "~2.0.0",
"uglify-js-brunch": "~2.0.1",
"vue-loader": "^13.0.0"
}
}
mais après serveur Phoenix en cours d'exécution, je vois un message d'erreur dans la console du navigateur
app.js:62 Uncaught Error: Cannot find module 'web/static/js/App.vue' from 'web/static/js/app.js'
at require (app.js:62)
at expanded (app.js:34)
at app.js:36
at initModule (app.js:43)
at require (app.js:60)
at app.js:11539
Quel est le problème et comment résoudre ce problème? . Bien sûr - rien appliqué dans mon navigateur :(