vue3+vite+ts 搭建mpa系统

项目搭建

vue3系统搭建有两种方式，一种是使用vuecli4.5版本以上，可以直接生成，各种需要的初始配置都有，比如eslint、ts等，具体使用可以参考https://cli.vuejs.org/zh/，只是编译依然使用的是webpack。另一种是使用vite命令

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

而使用这个命令生成的项目比较简单，需要的插件需要自己往系统里去按需安装。

多页面配置

// pages.js
export default {
    middleware: 'src/pages/middleware/index.html',
    hospitalNotice: 'src/pages/hospitalNotice/index.html',
    noticePreview: 'src/pages/noticePreview/index.html',
    teamConsultation: 'src/pages/teamConsultation/index.html'
};

// vite.config.js
export default defineConfig({
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        }
    },

    plugins: [vue(), vueJsx(), vitePluginCompression()],

    root: './src/pages/', // 页面根路径
    base: '/', 
    publicDir: '../../public', // public文件夹路径，里面的文件直接拷贝到build的outDir里去

    build: {
        // target: 'modules',
        outDir: '../../dist', // 输出文件夹，相对于root
        assetsDir: './assets', // 静态资源文件夹
        rollupOptions: {
            input: mpaPages, // 多页面配置文件
            output: {// 输出文件名
                chunkFileNames: 'js/[name]-[hash].js',
                entryFileNames: '[name]/[name]-[hash].js',
                assetFileNames: 'assets/[name]-[hash].[ext]'
            }
        },
        cssCodeSplit: true,
        emptyOutDir: true,
        minify: 'esbuild'
    },

});