不使用Vue CLI时如何在普通Typescript文件中引入CDN版Vue？

1. 安装必要依赖 #

在ts目录下执行命令：

npm install vue@2.x @types/node@16 --save

这里安装Vue2.x包仅用于获取官方配套的TS类型声明，无需将其打包进最终产物。

2. 修改tsconfig.json配置 #

调整两个核心配置项：

• 将typeRoots改为["./node_modules/@types"]，匹配当前项目的node_modules实际路径
• 在types数组中添加"vue"，主动引入Vue的类型声明
  修改后对应配置段如下：

"types": ["node", "vue"],
"typeRoots": ["./node_modules/@types"]

可选操作：如果需要直接使用全局Vue变量而不是通过window调用，可以在ts目录下新建vue.d.ts类型声明文件，内容如下：

declare global {
  const Vue: typeof import('vue');
  interface Window {
    Vue: typeof import('vue');
  }
}
export {}

3. 修改webpack配置 #

打开webpack.config.production.js做三处调整：

1. 入口路径改为你的TS文件实际路径：

entry: "./index_typescript.ts",

2. 新增externals配置，告诉webpack不需要把Vue打包进产物，直接使用全局挂载的Vue变量即可：

module.exports = {
  // 原有其他配置...
  externals: {
    vue: "Vue"
  },
}

3. 如果你需要使用.vue单文件组件，记得添加VueLoaderPlugin到webpack配置的plugins段，仅使用选项式API写代码可以忽略这步：

const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  // 原有其他配置...
  plugins: [new VueLoaderPlugin()]
}

4. 调整index_typescript.ts代码 #

去掉错误的本地vue文件导入语句，直接使用全局Vue变量：

const myApp = new Vue({
  data() {
    return {
      msg: "Hello",
    };
  },
  methods: {
    greet() {
      return this.msg + " world";
    },
  },
});
myApp.$mount("#app");

如果没有加前面的全局声明，直接写new window.Vue也可以正常识别。

5. 修正index.html的脚本引入路径 #

你webpack打包输出的js文件在ts/generated/logic.js，所以把HTML里的脚本引入路径改为对应路径即可：

<script src="./ts/generated/logic.js" defer></script>

验证 #

重新执行npm run prod编译，访问index.html即可正常运行。 #

内容的提问来源于stack exchange，提问作者kike