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-routervue3-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-routerhistory替换新选项mode
2、vue2-routermode: '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'

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

参考:点我这里

Logo

前往低代码交流专区

更多推荐