Vite --笔记

一、打包 allowJS

在tsconfig.js里面的compilerOptions对象下添加属性： “allowJs”: true,

文件：tsconfig.js：

 "compilerOptions": {
    "allowJs": true,
    }

二、isolatedModules

在vue中使用ts定义变量的时候报如下错误：

cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

原因

Typescript将没有导入/导出的文件视为旧脚本文件。这样的文件不是模块，它们的任何定义都已合并到全局名称空间中。 isolatedModules禁止此类文件。

将任何导入或导出添加到文件都使其成为一个模块，并且错误消失。

export {}也是一种方便的方法，可以在不导入任何内容的情况下使文件成为模块。

解决办法

找到tsconfig.json配置文件，把isolatedModules字段改为false

三、src配置全局路径@

1.安装path依赖

yarn add path -D

2.配置vite.config.ts

在resolve选项中配置一个alias别名

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: [
            {
                find: '@',
                replacement: path.resolve(__dirname, './src'),
            }
        ]
    }
})

• 此时已经可以通过 @ 符号引入vue组件和图片等如下，但是对于ts文件可能找不到路径

  • route路径对象可以使用

  • 组件中ts代码加载图片可使用

    import firePng from '@/assets/fire.png'
    
    export default {
        setup(){
            window.viewer.scene.primitives.add(new Cesium.ParticleSystem({
              //此处可使用上面引用的图片地址  
              image: firePng,
              startColor: Cesium.Color.RED.withAlpha(0.7),
              endColor: Cesium.Color.YELLOW.withAlpha(0.3),
              startScale: 25,
              endScale: 80,
              //设定粒子寿命可能持续时间的最小限值(以秒为单位)，在此限值之上将随机选择粒子的实际寿命。
              minimumParticleLife: 1,
              maximumParticleLife: 6,
              minimumSpeed: 1,
              maximumSpeed: 4,
              // Particles per second.
              emissionRate: 10,   //没秒施放的粒子数
              lifetime: 16.0,
              emitter: new Cesium.CircleEmitter(5.0),
              modelMatrix: computeModelMatrix(entity44.values[2], Cesium.JulianDate.now()),
              //modelMatrix: computeModelMatrix(entity44, Cesium.JulianDate.now()), //从模型转化成世界坐标
              emitterModelMatrix : computeEmitterModelMatrix()
            })
        }
    }
    

3.配置tsconfig.json

在在 compilerOptions 选择中增加 baseUrl 及 paths 配置

{
    "compilerOptions": {
        // ...省略其它配置项
        "baseUrl": ".",
        "paths": {
            "@/*": [ "src/*" ]
        }
    }
}