VUE2 迁移 vite

VUE2 迁移 vitevite.config.jsimport { createVuePlugin } from "vite-plugin-vue2"export default {root:'./', // 项目根目录（index.html 文件所在的位置）可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。publicDir: 'public', // 作为静态资源服务的文件夹.该值

青挽梦

3382人浏览 · 2021-08-09 15:35:10

青挽梦 · 2021-08-09 15:35:10 发布

VUE2 迁移 vite

vite.config.js

import { createVuePlugin } from "vite-plugin-vue2"

export default {
  root:'./', // 项目根目录（index.html 文件所在的位置）可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。
  publicDir: 'public', // 作为静态资源服务的文件夹.该值可以是文件系统的绝对路径，也可以是相对于项目的根目录的相对路径。
  base: './', // 公共基础路径。改值可以是绝对路径或空字符串
  mode: 'development',
  plugins: [createVuePlugin()],
  resolve: {
    alias: [
      { find: '@',  replacement: '/src'},
      { find: '@c',  replacement: '/src/components'},
      { find: /^~/, replacement: '' } // 解决 css @import 不生效
    ]
  },
  server: {
    host: '192.168.0.100',
    open: true, // 是否自动打开浏览器
    port: '8080'
  },
}

index.html 移动到根目录

引入main.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title> --> 
    <!--  % 会解析失败 报错   Internal server error: URI malformed  -->
  </head>
  <body>
    <noscript>
    </noscript>
    <div id="app"></div>
    <!-- main.js 需要添加 type="module" -->
    <script type="module" src="./src/main.js"></script>
  </body>
</html>

未适配VUE3的UI框架内置图标路径可能需要修改

进入node_modules 修改为相对位置路径取消变量引用路径

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^