国际化前端项目之「用vue-cli3从0开始搭建一个多入口」

大家好，我是鹿子。最近公司准备开发一个功能，由于功能复杂，且需要多端协同开发，所以，单拎出来新建了一个git项目。项目中用到的技术也是大家耳熟能详的，比如，vue-cli3、vie-router、vue-i18n、element-ui、dayjs、eslint、stylelint等等。下面带大家一起看一下整个过程。 项目简介

该项目是一个大项目单拎出来的一个大的模块功能，因为涉及多端协作同步开发。

项目目录

遇到的问题 多入口

因为项目需要多端协同开发，所以设置了多入口，这样大家就可以在一个项目上共同开发了。根据 vue-cli3 官方文档进行配置，项目最外层添加 vue.config.js 文件，并作如下配置

// 配置文件信息 var pageData = { publicPath: '/saas', // 项目文件部署的目录，例 https:www.baidu.com/saas assetsDir: static , // 项目中静态资源目录，若不需要可以不配置 outputDir: ./dist , // 项目文件打包后输出的问卷目录 buildVersion: new Date().valueOf(), entry: ./src/pages/main.js , // 项目入口文件 template: ./src/pages/index.html , // 项目默认html模板 filename: 'index.html', title: ... , } // 根据不同入口配置 switch (pageName){ case 'pc': case 'mb': pageData.publicPath = /client/qbank/${pageName} ; pageData.outputDir = ./dist/client/qbank/${pageName} ; pageData.entry = ./src/main_${pageName}.js ; pageData.template = ./src/index_${pageName}.html ; break; case 'saas': pageData.publicPath = /saas/qbank/${pageName} ; pageData.outputDir = ./dist/saas/qbank/${pageName} ; pageData.entry = ./src/main_${pageName}.js ; pageData.template = ./src/index_${pageName}.html ; break; default: pageData.publicPath = /saas/qbank/${pageName} ; pageData.outputDir = ./dist/saas/qbank/${pageName} ; pageData.entry = ./src/main_${pageName}.js ; pageData.template = ./src/index_${pageName}.html ; break; } module.exports = { publicPath: pageData.publicPath, assetsDir: pageData.assetsDir, outputDir: pageData.outputDir, productionSourceMap: false, // 是否开启生产模式下的sourceMap压缩 lintOnSave: true, // 是否开始eslint校验的控制台打印错误信息 css: { loaderOptions: { css: {}, postcss: { plugins: (loader)=>[ // Add the plugin new IconfontWebpackPlugin(loader), // 一个插件，用于将icon转为svg，兼容低版本浏览器，可以忽略 ] } } }, chainWebpack: (config)=>{ config.resolve.alias .set('@', resolve('src')) .set('_assets', resolve('src/assets')); // 路径别名 fs.remove(pageData.outputDir + '/' + pageData.assetsDir);