私は、webpack を使用する既存のプロジェクトに vuejs 3 を統合しようとしています。vue-loader について読んだので、それを使用しようとしています。
公式ドキュメントには次のように書かれています:
vue の新しいバージョンがリリースされるたびに、対応するバージョンの vue-template-compiler も一緒にリリースされます。vue-loader がランタイムと互換性のあるコードを生成するには、コンパイラのバージョンが基本の vue パッケージと同期している必要があります。つまり、プロジェクトで vue をアップグレードするたびに、それに合わせて vue-template-compiler もアップグレードする必要があります。
したがって、コンパイルしようとすると、次のエラーが発生します。
Vue packages version mismatch:
- [email protected] (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js)
- [email protected] (/home/alejo/playground/parquesFrontend/node_modules/vue-template-compiler/package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
しかしインストールしようとすると[メールアドレス]次のエラーが発生します:
❯ npm install [email protected]
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/alejo/.npm/_logs/2020-11-17T02_52_46_458Z-debug.log
この問題をどうすれば解決できますか?
ベストアンサー1
vite または vue cli を使用せずに vue 3 を webpack で正常に動作させるには、次の手順に従います。
- 次のように初期化します
package.json:
{
"private": true,
"name": "vue-3",
"description": null,
}
- vue の最新バージョンをインストールします:
npm i --save vue@next vue-loader@next
@vue/compiler-sfc置き換えを含む開発依存関係もインストールしますvue-template-compiler
npm i -D @vue/compiler-sfc css-loader file-loader mini-css-extract-plugin
url-loader webpack webpack-cli webpack-dev-server
- @vue/コンパイラ
- CSSローダー
- ファイルローダー
- ミニ CSS 抽出プラグイン
- URLローダー
- vue-loader
- ウェブパック
- webpack-cli
- webpack 開発サーバー
- 次の内容で webpack.config.js を作成または編集します。
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env = {}) => ({
mode: env.prod ? "production" : "development",
devtool: env.prod ? "source-map" : "cheap-module-eval-source-map",
entry: [
require.resolve(`webpack-dev-server/client`),
path.resolve(__dirname, "./src/main.js")
].filter(Boolean),
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: "/dist/"
},
resolve: {
alias: {
// this isn't technically needed, since the default `vue` entry for bundlers
// is a simple `export * from '@vue/runtime-dom`. However having this
// extra re-export somehow causes webpack to always invalidate the module
// on the first HMR update and causes the page to reload.
vue: "@vue/runtime-dom"
}
},
module: {
rules: [
{
test: /\.vue$/,
use: "vue-loader"
},
{
test: /\.png$/,
use: {
loader: "url-loader",
options: { limit: 8192 }
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { hmr: !env.prod }
},
"css-loader"
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css"
})
],
devServer: {
inline: true,
hot: true,
stats: "minimal",
contentBase: __dirname,
overlay: true,
injectClient: false,
disableHostCheck: true
}
});
devアプリを実行するためのスクリプトを追加します:
{
"private": true,
"scripts": {
"dev": "webpack-dev-server"
},
"dependencies": {
"vue": "^3.0.2"
},
"name": "vue-3",
"description": null,
"devDependencies": {
...
}
}
- 次の内容を入力してください
index.html:
<link rel="stylesheet" href="/dist/main.css" />
<div id="app"></div>
<script src="/dist/main.js"></script>
ついにnpm run devhttp://localhost:8080/にアクセスしてください。
すぐに使えるプロジェクトの場合は、これを複製してみてくださいリポジトリ上記の手順に従って構築されました。
