項(xiàng)目搭建
vue3系統(tǒng)搭建有兩種方式肄扎，一種是使用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
而使用這個(gè)命令生成的項(xiàng)目比較簡(jiǎn)單，需要的插件需要自己往系統(tǒng)里去按需安裝削咆。
多頁(yè)面配置
// 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/', // 頁(yè)面根路徑
base: '/',
publicDir: '../../public', // public文件夾路徑牍疏，里面的文件直接拷貝到build的outDir里去
build: {
// target: 'modules',
outDir: '../../dist', // 輸出文件夾，相對(duì)于root
assetsDir: './assets', // 靜態(tài)資源文件夾
rollupOptions: {
input: mpaPages, // 多頁(yè)面配置文件
output: {// 輸出文件名
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: '[name]/[name]-[hash].js',
assetFileNames: 'assets/[name]-[hash].[ext]'
}
},
cssCodeSplit: true,
emptyOutDir: true,
minify: 'esbuild'
},
});
