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了

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';@Component<Vue>({components: {HelloWorld}
})
export default class App extends Vue {public name:string = 'app';
}
</script>
复制代码

其他工具

<template lang="pug">
<style scoped lang="scss">
yarn add pug
yarn add pug-plain-loader
yarn add sass-loader
yarn add node-sass
复制代码

配置sass变量及postcss pxtorem

css: {modules: true,loaderOptions: {sass: {data: `@import "@/variables.scss";`},postcss: {plugins: [require('postcss-pxtorem')({rootValue: 75,propList: ['*', '!font-size'],}),]}}
}
复制代码

如何打包多页应用

熟悉webpack的同学知道多页打包主要是声明多个entry,vue-cli3配置有点不一样的是，需要指定pages

let path = require('path')
let glob = require('glob')function getEntry(globPath) {let pages = {};glob.sync(globPath).forEach(function(entry) {let basename = path.basename(entry, path.extname(entry));pages[basename] = {entry: entry,template: 'public/index.html',filename: `${basename}.html`,chunks: [basename]}});return pages;
}
// vue.config.js下面export增加pages属性
pages: getEntry('./src/pages/*.ts'),
复制代码

上面代码将会产出

pages: {login: {entry: './src/pages/login.ts',template: 'public/index.html',filename: 'login.html',chunks: ['login']},main: {entry: './src/pages/main.ts',template: 'public/index.html',filename: 'main.html',chunks: ['main']}
}
复制代码

打包之后的文件目录如下：

多页打包的另一个问题是：本地服务器以哪个页面为入口？

// 所以需要做个配置
devServer: {index: 'main.html'
}
复制代码

其他配置项可以参考vue-cli3官网
cli.vuejs.org/zh/guide/