Vue3.0 安装
npm i vue@next vue-loader@next
npm install vue-router@next
npm i webpack webpack-cli webpack-dev-server --save-dev
typescript安装依赖
npm install ts-loader --save-dev
npm install typescript --save-dev
npm install @vue/babel-plugin-jsx -D
npm i @babel/preset-env @babel/preset-typescript @vue/babel-plugin-jsx --save-dev
在.babelrc 或者babel.config.js增加
//babel.config.js
module.exports = {
presets: [["@babel/preset-env"], "@babel/preset-typescript"],
plugins: [["@vue/babel-plugin-jsx"]],
};
webpack.module.rules 配置
{
test: /\.tsx?$/,
use: [
{
loader: "babel-loader",
},
{
loader: "ts-loader",
},
],
},
{
test: /\.js(x)*$/,
loader: "babel-loader",
},
注意：
webpack 5 要求至少 Node.js 10.13.0 (LTS)
遇到的问题如下：
1、Vue3.x vue-router4.x 写法，使用版本如下：
由原来的 mode: "history" 更改为 history: createWebHistory()。（设置其他 mode 也是同样的方式）。
//安装版本
"vue": "^3.0.2",
"vue-loader": "^16.0.0-rc.1",
"vue-router": "^4.0.0-rc.3"
vue2-router 与 vue3-router 对比：
// vue2-router
const router = new VueRouter({
mode: history ,
...
})
//vue3-router（vue-next-router）
import {
createRouter, createWebHistory } from vue-next-router
const router = createRouter({
history: createWebHistory(),
...
})
说明：
1、 vue3-router 的history替换新选项mode
2、vue2-router 的 mode: 'history' 选项已替换为更灵活的名称 history。根据所使用的模式，适当的功能替换它：
"history":createWebHistory()
"hash":createWebHashHistory()
"abstract":createMemoryHistory()
详细资料：点我查阅
2、问题出现的原因：TypeError:window.Vue.use is not a function
问题说明：
我在package.json中采用的是 vue-router": "^4.0.0-rc.3
但却在index.html中引用3.4.9的版本，所以使用Vue3.x + vue-router4.x导致如下异常
<script src="https://unpkg.com/vue-router@3.4.9/dist/vue-router.js"></script>
解决方案：
"vue-router": "^4.0.0-rc.3"
//or 在index.html中引用
<script src="https://unpkg.com/vue-router@next"></script>
3、vue-i18n 使用
据vue-i18n描述，vue-i18n很快将转移到合并组织。之后，它将在intlify上进行开发和维护。
问题：vue-i18n will soon be transferred to intlify organization. After that, it will be developed and maintained on intlify ，
详情见 这里
原先写法：
import VueI18n from 'vue-i18n';
import messages from './404';
export const i18n = new VueI18n({
locale: 'zh-CN',
messages,
});
现在，需安装，后使用
//安装
//npm i @intlify/vue-i18n-loader
//使用
import messages from "./404";
import {
useI18n, createI18n } from "vue-i18n";
const i18n = createI18n({
locale: "zh-CN",
messages,
});
export {
i18n };
更多使用：请参阅
4、如： Uncaught ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
vue 3.x 增加了两个编译时配置：__VUE_OPTIONS_API__和__VUE_PROD_DEVTOOLS__，适当地配置它们能提高 tree shaking 的效果。点我查看来源
因为程序不允许使用未定义的变量，所以目前使用 vue 3.x 会报错。（没有试过Vue新提出的vite ）
解决方案：
使用 webpack.DefinePlugin 对它们进行编译时替换：
const webpack = require('webpack');
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: JSON.stringify(true),
__VUE_PROD_DEVTOOLS__: JSON.stringify(false)
})
],
参考链接：点我查看
5、 webpack配置中环境变量设置 process.env.NODE_ENV
// webpack.config.js
module.exports = {
// webpack的mode(模式参数)：不同模式下进行不同的内置优化
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
NODE_ENV 这个变量在具体的应用的时候是需要对当前的环境变量进行设置的，一般情况会在进行执行不同命令的时候去设置
由于这个变量针对于不同的操作系统设置方式不一样，如设置为开发模式的话，
//window系统
set NODE_ENV=development
//mac系统
export NODE_ENV=development
这样切换不大方便，所以提供了cross-env, 这是一个跨平台的第三方的包，使用的时候需要安装下，
//设置环境变量: cross-env NODE_ENV=development即可
npm i --save-dev cross-env
如：package.json
{
"scripts": {
// 设置为开发环境并且按照webpack.dev.js的配置进行打包部署
"dev": "cross-env NODE_ENV=development webpack --config webpack.config.js"
}
}
6、TypeScript 引用资源文件后提示找不到的错误处理方案
问题描述：在tsx中引用视频或图片，在文件文本编辑器中提示错误引用
问题：ERROR：TS2307: Cannot find module '@/static/media/hero-home.mp4' or its corresponding type declarations.
原因： 文件是能找到的，页面同时也正常打开显示，唯独编译不通过，导致后续无法进行！
解决方案：
说明：typescript无法识别非代码文件(JS下是可以的)。如果需要在ts中识别此文件资源，可以先声明文件类型。
新建一个ts文件，比如global.d.ts（.d.ts是typescript declaration file的简称），并放在主要代码文件夹下。
在ts文件中，添加各种文件类型的声明，比如：
declare module '*.svg' {
interface Svg {
content: string;
id: string;
viewBox: string;
node: any;
}
const svg: Svg;
export default svg;
}
declare module '*.png' {
const png: string;
export default png;
}
declare module '*.mp3' {
const mp3: string;
export default mp3;
}
declare module '*.mp4' {
const mp3: string;
export default mp4;
}
declare module '*.gif' {
const png: string;
export default png;
}
也可以简略为 declare module '*.png'；
项目编译时，会自动读取文件内容。然后就能识别资源文件了
参考：点我这里
转载：https://blog.csdn.net/qq_16559905/article/details/109819995