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了

<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/