0

我正在尝试在带有默认早午餐资产管理器的 Phoenix Framework 应用程序中使用 vue.js 和 vue-loader。当然 - 我可以切换到 webpack，但我想在早午餐下解决这个问题。

我有以下 app.js

import App from './App.vue'

new Vue({
  el: 'body',
  components: { 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>

和早午餐-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"
    },
  }
};

和 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"
  }
}

但是在运行 phoenix server 之后，我在浏览器的控制台中看到了错误消息

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

出了什么问题以及如何解决这个问题？当然 - 我的浏览器中没有任何应用:(

4

1 回答 1

0

我有一个类似的设置，使用 Phoenix 1.3。

应用程序.js：

import "phoenix_html"

import Vue from 'vue'

import App from "../vue/components/MyApp.vue"
Vue.component('my-app', MyApp);

import Test from "../vue/components/Test.vue"
Vue.component('test', Test);

import axios from 'axios';

var vm = new Vue({
    el: '#app',
    render: h => h(MyApp)
})

早午餐-config.js

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["priv/static/css/app.scss"] // 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 "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor", "vue"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    copycat: {
      "fonts": ["node_modules/font-awesome/fonts"] // copy node_modules/font-awesome/fonts/* to priv/static/fonts/
    },
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // tell sass-brunch where to look for files to @import
        precision: 8 // minimum precision required by bootstrap
      }
    },
    vue: {
      extractCSS: true,
      out: '../priv/static/css/components.css'
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true,
    globals: { // Bootstrap JavaScript requires both '$', 'jQuery', and Tether in global scope

      $: 'jquery',
      jQuery: 'jquery',
      Tether: 'tether',
      bootstrap: 'bootstrap' // require Bootstrap JavaScript globally too
    }
  }
};

包.json

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "bootstrap": "^4.0.0-alpha.6",
    "eslint-plugin-vue": "^2.1.0",
    "font-awesome": "^4.7.0",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "vue": "^2.3.4",
    "vue-brunch": "^2.0.1"
  },
  "devDependencies": {
    "babel-brunch": "6.0.6",
    "babel-plugin-transform-runtime": "^6.23.0",
    "brunch": "2.10.7",
    "clean-css-brunch": "2.10.0",
    "copycat-brunch": "^1.1.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb-base": "^11.2.0",
    "eslint-plugin-import": "^2.7.0",
    "holderjs": "^2.9.4",
    "node-sass": "^4.5.3",
    "sass-brunch": "^2.10.4",
    "uglify-js-brunch": "2.1.1"
  }
}

我在 assets/vue/components 创建了一个目录，这是我放置 MyApp.vue 和 Test.vue 的地方

如果一切顺利，您的 JS 文件应该被编译并位于 priv/static/js/app.js

此设置的问题是，如果您使用 MPA，您将在每个页面中引入这些组件。早午餐的 entryPoint（而不是 joinTo）看起来可以帮助解决这个问题，但在正确设置时仍然存在问题。

于 2017-07-16T12:42:12.010 回答