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'；

项目编译时，会自动读取文件内容。然后就能识别资源文件了

参考：点我这里