Vuejs 3 : vue-template-compiler 문제
vuejs 3을 webpack을 사용하는 기존 프로젝트에 통합하려고합니다. 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.
하지만 [email protected]를 설치하려고하면이 오류가 발생합니다.
❯ 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
이 문제를 어떻게 해결할 수 있습니까?
답변
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 / 컴파일러 -sfc
- CSS 로더
- 파일 로더
- mini-css-extract-plugin
- URL 로더
- vue-loader
- 웹팩
- webpack-cli
- 웹팩 개발 서버
- 다음 내용으로 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 dev http : // localhost : 8080 / 방문을 실행 하십시오.
사용할 준비가 된 프로젝트를 위해 위의 단계에 따라 빌드 된 이 REPOSITORY 를 복제 하십시오.
Vue 3과 함께 vue-loader @ next 를 사용해야한다고 생각합니다.
Vue 3에서 SFC 컴파일러 패키지는 더 이상 vue-template-compiler없지만 compiler-sfc( 여기에서 확인하십시오 )
Vue CLI를 사용하여 프로젝트를 관리하라는 제안에 전적으로 동의합니다. 모든 종속성을 관리하는 데 많은 어려움을 겪을 수 있습니다 (특히 Vue 3 생태계가 Vue 3 릴리스와 많은 도구 이벤트를 따라 잡으려고 할 때). vue-loader와 같은 마이그레이션 문서가 있습니다.)
기존 프로젝트에 이미 Webpack 구성이있어 CLI를 사용할 수없는 경우에도 CLI를 가이드로 사용할 수 있습니다. 측면에서 새 프로젝트를 생성하고 vue inspect명령을 사용하여 사용중인 Webpack 구성 및 package.json필수 종속성 을 검사하십시오 .
수동으로 Vue2 앱을 Vue3로 업그레이드했는데 모든 종속성을 업그레이드 한 후 단위 테스트를 실행할 때이 오류가 발생했습니다.
모든 것이 작동하도록하려면 Jest의 구성 파일도 수정해야했습니다.
에서가 jest.config.js설정된 "transform"속성을합니다 :
{
transform: '^.+\\.vue$': `vue-jest`
}
시작하는 데 사용한 종속성은 cli를 사용하여 만든 새로운 Vue3.0 앱에서 가져 왔습니다. 다음은 내 CLI 설정이 나에게 얻은 종속성입니다.
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/test-utils": "^2.0.0-0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
}
내 CLI 설정의 경우 .eslintrc.jsVue3에 대해 약간의 변경 사항이 있습니다. 새로 설치에서 cli는 다음 "extends"과 같이 속성을 만듭니다 .
extends: [
`plugin:vue/vue3-essential`,
`eslint:recommended`
],