设置：
Gemfile:
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '3.0.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.4'
# Use postgresql as the database for Active Record
gem 'pg', '~> 1.1'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 4.1.0'
# Display performance information such as SQL time and flame graphs for each request in your browser.
# Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
gem 'rack-mini-profiler', '~> 2.0'
gem 'listen', '~> 3.3'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 3.26'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
package.json:
{
"name": "bubble-worlds",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.0",
"@vue/compiler-sfc": "^3.1.5",
"vue": "^2.6.14",
"vue-loader": "^16.3.1",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
}
webpacker.yml:
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
webpack_compile_output: true
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
additional_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .vue
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
我已致电：$ bundle i$ npm i没有故障。
我没有接触代码中的任何内容，只是创建了一个rails应用程序：
$ rails new app --skip-turbolinks --webpack=vue --database=postgresql
当我rails s时，默认的Vue文件不会编译为public/packs。
调用$ rake webpacker:compile会抛出以下错误：
Compiling...
Compilation failed:
Hash: 84ecf9168dd19a51983a
Version: webpack 4.46.0
Time: 3973ms
Built at: 19/07/2021 15:53:36
5 assets
Entrypoint application = js/application-471d300c711a6489cb98.js js/application-471d300c711a6489cb98.js.map
Entrypoint hello_vue = js/hello_vue-247694b52604ed8c92a7.js js/hello_vue-247694b52604ed8c92a7.js.map
[1] (webpack)/buildin/global.js 905 bytes {1} [built]
[2] ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=style&index=0&id=2888e551&scoped=true&lang=css 755 bytes {1} [built]
[5] ./app/javascript/packs/application.js 426 bytes {0} [built]
[6] (webpack)/buildin/module.js 552 bytes {0} [built]
[7] ./app/javascript/channels/index.js 205 bytes {0} [built]
[8] ./app/javascript/channels sync _channel.js$ 160 bytes {0} [built]
[12] ./app/javascript/app.vue?vue&type=style&index=0&id=2888e551&scoped=true&lang=css 345 bytes {1} [built]
[14] ./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=style&index=0&id=2888e551&scoped=true&lang=css 786 bytes {1} [built]
[16] ./app/javascript/packs/hello_vue.js + 5 modules 3.34 KiB {1} [built]
| ./app/javascript/packs/hello_vue.js 1.85 KiB [built]
| ./app/javascript/app.vue 340 bytes [built]
| ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true 185 bytes [built]
| ./app/javascript/app.vue?vue&type=script&lang=js 334 bytes [built]
| ./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true 593 bytes [built]
| ./node_modules/babel-loader/lib??ref--7-0!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=script&lang=js 68 bytes [built]
+ 8 hidden modules
ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 9:24-36
"export 'createBlock' (imported as '_createBlock') was not found in 'vue'
@ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello_vue.js
ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 10:4-16
"export 'createVNode' (imported as '_createVNode') was not found in 'vue'
@ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello_vue.js
ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 9:10-20
"export 'openBlock' (imported as '_openBlock') was not found in 'vue'
@ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello_vue.js
ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 6:0-11
"export 'popScopeId' (imported as '_popScopeId') was not found in 'vue'
@ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello_vue.js
ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 4:0-12
"export 'pushScopeId' (imported as '_pushScopeId') was not found in 'vue'
@ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello_vue.js
ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 10:28-44
"export 'toDisplayString' (imported as '_toDisplayString') was not found in 'vue'
@ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello_vue.js
ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 2:29-41
"export 'withScopeId' (imported as '_withScopeId') was not found in 'vue'
@ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello_vue.js
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
我真的不知道发生了什么。我想这些方法是通过JSX语法调用的，在编译时似乎不存在vue。。。
知道吗？
刚刚找到了一个解决方案：
当您$ rails new myapp --webpack=vue时，它会生成一个使用vue-loader@16+的package.json。。。但是这个包依赖于compiler-sfc@3+来工作。。。最后一个依赖于Vue3。。。第一眼看到兔子洞真好看，不是吗？
只需将vue-loader的版本更改为15.9.7，并删除对compiler-sfc的依赖，就可以省去很多麻烦。这个版本的vue-loader还需要6之前的css-loader版本，所以将css-loader@5.2.7添加到您的软件包配置中，您就可以开始了！
祝你好运。