vue 3.0 + TS + vite 实战笔记

1. 引用报错 （不能使用@）

const Home = () => import('@/views/Home.vue')

解决方案：

①  在vite.config.ts 中添加如下配置

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // Vite路径别名配置
    alias: {
      "@": path.resolve("./src"),
    },
  },
})

②  直接使用相对路径

const Home = () => import('../views/Home.vue')

2. 按需加载 ant-desgin

下载 unplugin-vue-components ，在vite.config.ts  中 引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';   

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()],    //Ant design 按需加载
    }),
  ]
})

3. vite 解決跨域

在vite.config.ts 中添加server 配置

 //配置proxy 解决跨域
server: {
    proxy: {
      "/api": {
        target: "",   //后端服务地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

4.vite 常见配置

import { createRequire } from 'module'
const require = createRequire(import.meta.url)
const fs = require('fs')
const dotenv = require('dotenv')
import { defineConfig } from 'vite'
const { createVuePlugin } = require('vite-plugin-vue2')
import requireContext from 'rollup-plugin-require-context2'
import legacy from '@vitejs/plugin-legacy'

// 将.env文件中的配置解析到process.env上
function parseEnv(mode) {
    console.log('mode:', mode)
    let fileName = mode ? `.env.${mode}` : '.env'
    const envConfig = dotenv.parse(fs.readFileSync(fileName))
    for (const k in envConfig) {
        process.env[k] = envConfig[k]
    }
}

// https://vitejs.dev/config/
export default ({ mode }) => {
    parseEnv()
    if (mode) {
        parseEnv(mode)
    }
 
    const port = process.env.VITE_APP_PORT // dev port
    const backEndPath = process.env.VITE_APP_BASE_API_BACK_END + '/'
    return defineConfig({
        base: process.env.VITE_APP_PUBLIC_PATH,
        plugins: [
            legacy({
                targets: ['defaults', 'not IE 11'],
            }),
            createVuePlugin({
                jsx: true,
                vueTemplateOptions: {
                    compilerOptions: {
                        whitespace: 'condense',
                    },
                }, jsxOptions: {
                    compositionAPI: true,
                },
            }),
            {
                ...requireContext(),
                enforce: 'pre',
                apply: 'serve',
            },
        ],
        optimizeDeps: {
            include: [
                'path-browserify',
                'lodash',
            ],
        },
        resolve: {
            alias: {
                '@': '/src',
                '@api': '@/api'
            },
        },
        server: {
            port,
            open: true,
            headers: {
                "Access-Control-Allow-Credentials": true,
                "Access-Control-Allow-Origin": "*", //允许跨域
                "Access-Control-Allow-Headers": "*",
                "Access-Control-Allow-Methods": "*",
                "x-frame-options":"ALLOW-FROM localhost:3000",  //允许作为iframe 被访问
                'Cross-Origin-Embedder-Policy': 'require-corp',
                'Cross-Origin-Opener-Policy': 'same-origin',
            },
            proxy: {
                [backEndPath]: {
                    target: process.env.VITE_APP_DEV_PROXY_URL + backEndPath,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(new RegExp(`^${backEndPath}`), ''),
                },
            },
        },
        build: {
            outDir: '',
            emptyOutDir: true,
            assetsDir: 'static',
            rollupOptions: {
                output: {
                    manualChunks: {
                        'element-ui': ['element-ui'],
                    },
                },
            },
        },
    })
}

5. node 升版本到17 以上，启动之前vue2.0 的项目会报错

报错信息如下：

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\gis-ass-acts-fzweb\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\gis-ass-acts-fzweb\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (D:\gis-ass-acts-fzweb\node_modules\webpack\lib\NormalModule.js:449:10)
    at D:\gis-ass-acts-fzweb\node_modules\webpack\lib\NormalModule.js:481:5
    at D:\gis-ass-acts-fzweb\node_modules\webpack\lib\NormalModule.js:342:12
    at D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array. (D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\gis-ass-acts-fzweb\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\gis-ass-acts-fzweb\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
 10% building 2/5 modules 3 active ...\node_modules\webpack\hot\dev-server.jsnode:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\gis-ass-acts-fzweb\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\gis-ass-acts-fzweb\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (D:\gis-ass-acts-fzweb\node_modules\webpack\lib\NormalModule.js:449:10)
    at D:\gis-ass-acts-fzweb\node_modules\webpack\lib\NormalModule.js:481:5
    at D:\gis-ass-acts-fzweb\node_modules\webpack\lib\NormalModule.js:342:12
    at D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array. (D:\gis-ass-acts-fzweb\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\gis-ass-acts-fzweb\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\gis-ass-acts-fzweb\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at D:\gis-ass-acts-fzweb\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.0

解决方案：

在当前项目目录下，设置：set NODE_OPTIONS=--openssl-legacy-provider 

6.为解决老项目中node-sass版本与当前最新node版本冲突， 安装了nvm来管理node版本

       ①. 安装nvm之前，最好把node都卸载

       ②.nvm 安装成功后，安装node 18.12.0 版本报错了，报错信息如下图：

nvm install 18.12.0

Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt.


Get "https://nodejs.org/dist/latest/SHASUMS256.txt": EOF

       ③. 使用nvm root 查看nvm安装路径，找到settings.txt，在文件中加入

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

      node就能正常安装啦！！！

7.组件中引用path报错，但在vite.config.ts 中能正常使用

使用：某个组件中  import path from "path";

报错：Module “path” has been externalized for brower compatibility and cannot be accesed in client code

原因： vite 源码中设定了不允许在客户端代码中访问内置模块代码。

解决方案：

①安装npm install path-browserify

②使用 path-browserify 代替 path 模块

③不再使用import path from 'path'，改为import path from 'path-browserify'