vue-cli3集成typescript，sass variables，多页打包

vue-cli早期版本支持搭建时直接引入typescript，不需要自己配置
3.4.1版本ui搭建时没有自动集成typescript，所以记录下自己搭建的坑

总共三步

第一步：vue.config.js配置loader，涉及两个依赖ts-loader，typescript

chainWebpack: config => {
    config.module
    .rule('tsx')
    .use('ts-loader')
    .loader('ts-loader')
    .tap(options => {
        return Object.assign(options || {}, { allowTsInNodeModules: true });
    })
}
复制代码

第二步：cli3不能手动修改entry，需要安装一个插件@vue/cli-plugin-typescript

yarn add @vue/cli-plugin-typescript
复制代码

第三步：根目录tsconfig.json配置

{
    "compilerOptions": {
        "target": "esnext",
		"module": "esnext",
		"strict": true,
		"jsx": "preserve",
		"importHelpers": true,
		"moduleResolution": "node",
		"experimentalDecorators": true,
		"esModuleInterop": true,
		"allowSyntheticDefaultImports": true,
		"sourceMap": true,
		"baseUrl": ".",
		// "types": [
		// 	"webpack-env"
		// ],
		"paths": {
			"@/*": [
			    "src/*"
			]
		},
		"lib": [
			"esnext",
			"dom",
			"dom.iterable",
			"scripthost"
		]
    },
    "include": [
        "./src/**/*"
    ],
	"exclude": [
        "./node_modules/*",
        "./public/*"
	]
}
复制代码

好了，配置文件已经搞定，可以开始写ts了

复制代码

其他工具