Question

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

我有以下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>

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

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

但运行凤凰服务器后，我在浏览器的控制台中看到错误消息

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

什么是错的，如何解决这个问题？当然 - 我的浏览器中没有应用任何内容：（

Answer 1

我使用Phoenix 1.3进行了类似的设置。

app.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
    }
  }
};

的package.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，此设置的问题是您将在每个页面中提取这些组件。早午餐的入口点（而不是joinTo）看起来可能对此有所帮助，但仍然存在设置正确的问题。

是否可以在早午餐下使用vue-loader？

1 个答案: