Rails 5.1 api webpacker 和 vuejs

Question

我正在尝试在 Cloud9 上使用 webpacker 在 VueJs 中创建一个 Rails API 和一个客户端。

标准安装后：npm install -g yarn && rails _5.1.4_ new . --api --webpack=vue

我正在使用 Foreman 启动 rails 和 webpack，这是文件。

# Procfile.dev
web: bundle exec rails s -p $PORT -b $IP
webpacker: ./bin/webpack-dev-server --inline true --hot true --public $C9_HOSTNAME

我将 config/webpacker.yml 的开发部分更改为：

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 8081

启动 foreman start 时，webpack 创建 public/packs/manifest.json 包含跟随对象。

{
  "application.js": "/packs/application-d2ce57fea2210882a7d4.js",
  "hello_vue.css": "/packs/hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css",
  "hello_vue.js": "/packs/hello_vue-d8d50a7562d6abcbea06.js"
}

我创建了一个 public/index.html 文件，其中包含以下内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="packs/hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css" />
  </head>

  <body>
    <script type="text/javascript" src="packs/application-d2ce57fea2210882a7d4.js"></script>
    <script type="text/javascript" src="packs/hello_vue-bd484161b1956b3a536b.js"></script>
  </body>
</html>

现在，当我转到 URL 时，我的 JavaScript 控制台中有 Hello World from Webpacker，浏览器中有 Hello Vue!。

我的问题是：是否可以使用这个生成的 manifest.json 来自动启动好的文件（js，css）以及如何？

Answer 1

有一个名为 html-webpack-plugin 的插件可以创建包含所有好的 css 和 js 链接的 index.html 文件。

我只需要 npm install html-webpack-plugin --save-dev 然后像这样修改我的 config/webpack/development.js :

const environment = require('./environment')
const HtmlWebpackPlugin = require('html-webpack-plugin')

environment.plugins.prepend('HtmlWebpackPlugin', new HtmlWebpackPlugin({
  title: 'My Vuejs App',
  inject: true
}))

module.exports = environment.toWebpackConfig()

Rails 5.1 api webpacker 和 vuejs

Rails 5.1 api webpacker and vuejs

ruby-on-rails

vue.js

webpacker

manifest.json