Vuejs 3 webpack:vue-template-compiler 的问题 [英] Vuejs 3 webpack : Problem with vue-template-compiler
问题描述
我正在尝试将 vuejs 3 集成到使用 webpack 的现有项目中.我读过 vue-loader,所以我正在尝试使用它.
在官方文档中我有这个:
vue 每次发布新版本时,都会同时发布相应版本的 vue-template-compiler.编译器的版本必须与基础 vue 包同步,以便 vue-loader 生成与运行时兼容的代码.这意味着每次升级项目中的 vue 时,都应该升级 vue-template-compiler 以匹配它.
因此,当我尝试编译时出现此错误:
Vue 包版本不匹配:- vue@3.0.2 (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js)- vue-template-compiler@2.6.12 (/home/alejo/playground/parquesFrontend/node_modules/vue-template-compiler/package.json)这可能会导致事情无法正常工作.确保对两者使用相同的版本.如果您使用的是 vue-loader@>=10.0,只需更新 vue-template-compiler.如果您使用的是 vue-loader@<10.0 或 vueify,重新安装 vue-loader/vueify 应该会将 vue-template-compiler 提升到最新版本.
但是当我尝试安装 vue-template-compiler@3.0.2 时出现此错误:
❯ npm install vue-template-compiler@3.0.2错误!代码 ETARGETnpm 错误!notarget 找不到与 vue-template-compiler@3.0.2 匹配的版本.npm 错误!notarget 在大多数情况下,您或您的依赖项之一正在请求npm 错误!notarget 不存在的包版本.npm 错误!可以在以下位置找到此运行的完整日志:错误!/home/alejo/.npm/_logs/2020-11-17T02_52_46_458Z-debug.log
我该如何解决这个问题?
要使 vue 3 在不使用 vite 或 vue cli 的情况下与 webpack 一起正常工作,请执行以下步骤:
- 初始化
package.json
像:
<代码>{私人":真的,名称":vue-3",描述":空,}
- 安装最新版本的 vue :
npm i --save vue@next vue-loader@next
- 还安装包括替换
vue-template-compiler
的
@vue/compiler-sfc
的开发依赖项npm i -D @vue/compiler-sfc css-loader file-loader mini-css-extract-pluginurl-loader webpack webpack-cli webpack-dev-server
- @vue/compiler-sfc
- css-loader
- 文件加载器
- mini-css-extract-plugin
- 网址加载器
- vue-loader
- webpack
- webpack-cli
- webpack-dev-server
- 使用以下内容创建或编辑您的 webpack.config.js :
const path = require("path");const { VueLoaderPlugin } = require(vue-loader");const MiniCssExtractPlugin = require(mini-css-extract-plugin");module.exports = (env = {}) =>({模式: env.prod ?生产":发展",开发工具:env.prod ?源地图":廉价模块评估源地图",入口: [require.resolve(`webpack-dev-server/client`),path.resolve(__dirname, "./src/main.js")].过滤器(布尔),输出: {路径:path.resolve(__dirname, "./dist"),公共路径:/dist/";},解决: {别名:{//这在技术上不是必需的,因为打包器的默认 `vue` 条目//是一个简单的 `export * from '@vue/runtime-dom`.然而有了这个//额外的重新导出以某种方式导致 webpack 总是使模块无效//在第一次 HMR 更新并导致页面重新加载.vue: "@vue/runtime-dom";}},模块: {规则: [{测试:/\.vue$/,使用:vue-loader"},{测试:/\.png$/,用: {加载器:网址加载器",选项:{限制:8192}}},{测试:/\.css$/,用: [{加载器:MiniCssExtractPlugin.loader,选项:{ hmr: !env.prod }},css加载器"]}]},插件: [新的 VueLoaderPlugin(),新的 MiniCssExtractPlugin({文件名:[名称].css"})],开发服务器:{内联:真实,热:真的,统计数据:最小",contentBase: __dirname,叠加:真实,注入客户端:假,disableHostCheck: 真}});
- 添加
dev
脚本以运行您的应用:
<代码>{私人":真的,脚本":{开发":webpack-dev-server"},依赖关系":{vue":^3.0.2"},名称":vue-3",描述":空,开发依赖":{...}}
- 用以下内容填充
index.html
:
最后运行npm run dev
访问http://localhost:8080/
为了准备好使用的项目,尝试克隆这个
I am trying to integrate vuejs 3 to an existing project which uses webpack. I read about vue-loader, so I am trying to use it.
In the official documentation I have this:
Every time a new version of vue is released, a corresponding version of vue-template-compiler is released together. The compiler's version must be in sync with the base vue package so that vue-loader produces code that is compatible with the runtime. This means every time you upgrade vue in your project, you should upgrade vue-template-compiler to match it as well.
So, when I try to compile I get this error:
Vue packages version mismatch:
- vue@3.0.2 (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js)
- vue-template-compiler@2.6.12 (/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.
But when I try to install vue-template-compiler@3.0.2 I get this error:
❯ npm install vue-template-compiler@3.0.2
npm ERR! code ETARGET
npm ERR! notarget No matching version found for vue-template-compiler@3.0.2.
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
How can I solve this problem?
To make vue 3 work fine with webpack without using vite or vue cli follow these steps :
- init the
package.json
like :
{
"private": true,
"name": "vue-3",
"description": null,
}
- install the last version of vue :
npm i --save vue@next vue-loader@next
- install also the dev dependencies that includes
@vue/compiler-sfc
which replacesvue-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/compiler-sfc
- css-loader
- file-loader
- mini-css-extract-plugin
- url-loader
- vue-loader
- webpack
- webpack-cli
- webpack-dev-server
- create or edit your webpack.config.js with following content :
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
}
});
- Add
dev
script to run your app :
{
"private": true,
"scripts": {
"dev": "webpack-dev-server"
},
"dependencies": {
"vue": "^3.0.2"
},
"name": "vue-3",
"description": null,
"devDependencies": {
...
}
}
- Fill the
index.html
with following content :
<link rel="stylesheet" href="/dist/main.css" />
<div id="app"></div>
<script src="/dist/main.js"></script>
Finally run npm run dev
the visit http://localhost:8080/
for a ready to use project try to clone this REPOSITORY which built by following the steps above.
这篇关于Vuejs 3 webpack:vue-template-compiler 的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!