我一直创建一个vuejs版本的项目。随着typescript的流行，今天就带大家来打造一个typescript版本的项目。首先介绍一下我本地的环境：直接使用脚手架创建一个vue项目，具体操作步骤参考https://cli.vuejs.org/zh/guid。。。今天才知道可以用图形化的创建vue项目的界面。使用两种方法创建，如下我的配置InstalledCLIPluginsbabelroutervuexeslintunit-mochae2e-cypresstypescriptscript直接创建npminstall插件，创建的ui需要手动npminstall，如果我没记错的话。使用npmrunserve，我们看界面默认创建的项目是没有vue.config.js文件的。我们需要手动创建它并进行一些配置。如果我们不创建，默认启动端口是8080。我从vue-typescript-admin-template开始复制了一个vue.config.js//eslint-disable-next-line@typescript-eslint/no-var-requiresconstpath=require('path')//如果你的端口设置为80，//使用管理员权限执行命令行。//例如，在Mac上：sudonpmrun/sudoyarnconstdevServerPort=9527//TODO:从setting.tsconst获取这个变量mockServerPort=9528//TODO:从setting.tsconst获取这个变量name='VueTypescriptDemo'//TODO：从setting.tsmodule.exports={publicPath:process.env.NODE_ENV==='production'获取这个变量？'/vue-ts-demo/':'/',lintOnSave:process.env.NODE_ENV==='development',productionSourceMap:false,devServer:{port:devServerPort,open:true,overlay:{warnings:false,errors:true},progress:false,proxy:{//更改xxx-api/login=>/mock-api/v1/login//详细信息：https://cli.vuejs.org/config/#devserver-proxy[process.env.VUE_APP_BASE_API]:{目标：`http://127.0.0.1:${mockServerPort}/mock-api/v1`,changeOrigin:true,//虚拟托管站点需要ws:true,//代理websocketspathRewrite:{['^'+process.env.VUE_APP_BASE_API]:''}}}},pluginOptions:{'style-resources-loader':{//需要配合vue-cli-plugin-style-resources-loader使用，否则导入样式会失败preProcessor:'scss',patterns:[path.resolve(__dirname,'src/styles/_variables.scss'),//引入初始样式，无需引入path.resolve(__dirname,'src/styles/_mixins.scss')]}},chainWebpack(config){//以html形式提供app的标题-webpack-plugin的选项列表，以便//它可以在index.html中访问以注入正确的标题。//https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin配置.plugin('html').tap(args=>{args[0].title=namereturnargs})//可以提高首屏速度，建议开启preloadconfig.plugin('preload').tap(()=>[{rel:'preload',//忽略runtime.js//https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171fileBlacklist:[/\.map$/,/hot-update\.js$/,/runtime\..*\.js$/],include:'initial'}])//当页面较多时，会导致太多无意义的请求config.plugins.delete('prefetch')//https://webpack.js.org/configuration/devtool/#development//如果需要，更改开发环境源映射。//vue-cli中的默认值是'eval-cheap-module-source-map'。//配置//.when(process.env.NODE_ENV==='development',//配置=>config.devtool('eval-cheap-source-map')//)配置.when(process.env.NODE_ENV!=='开发',配置=>{config.optimization.splitChunks({chunks:'all',cacheGroups:{libs:{name:'chunk-libs',test:/[\\/]node_modules[\\/]/,priority:10,chunks:'initial'//只封装初始依赖的第三方},elementUI:{name:'chunk-elementUI',//将elementUI拆分为一个单独的封装priority:20,//权重需要大于libs和app或者会打包成libs或者apptest:/[\\/]node_modules[\\/]_?element-ui(.*)///为了适配cnpm},commons:{name:'chunk-commons',test:path.resolve(__dirname,'src/components'),minChunks:3,//最小公共数优先级:5,reuseExistingChunk:true}}})//https://webpack.js.org/configuration/optimization/#optimizationruntimechunkconfig.optimization.runtimeChunk('single')})}}然后运行，浏览器打开9527端口
