色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue 多個入口 路由

傅智翔1年前8瀏覽0評論

在Vue中,我們可以使用多個入口來管理不同的頁面或模塊。每個入口都可以包含自己的組件、路由、狀態管理等。這種方式可以使項目結構更加清晰,便于團隊合作開發。

對于多個入口的情況,我們需要在webpack的配置文件中做一些調整。具體來說,我們需要為每個入口配置不同的html模板和打包后的文件名,避免資源文件的沖突。另外,我們也可以通過配置不同的publicPath來指定不同的靜態資源路徑。

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
entry: {
app: './src/main.js',
admin: './src/admin.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': path.resolve(__dirname, 'src')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
chunks: ['app']
}),
new HtmlWebpackPlugin({
template: './public/admin.html',
filename: 'admin.html',
chunks: ['admin']
}),
new VueLoaderPlugin()
]
}

上面的配置文件中,我們定義了兩個入口分別為app和admin,每個入口分別使用不同的html模板(index.html和admin.html),打包后的文件名也分別為app.js和admin.js。

對于路由的處理,我們可以通過vue-router提供的多路由實例來實現。具體來說,我們需要為每個入口創建一個獨立的路由實例,并在對應的組件中引入相應的路由實例。

// app.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h =>h(App)
}).$mount('#app')
// admin.js
import Vue from 'vue'
import Admin from './Admin.vue'
import router from './adminRouter'
Vue.config.productionTip = false
new Vue({
router,
render: h =>h(Admin)
}).$mount('#admin')

在上面的代碼中,我們分別引入Router實例router和adminRouter,并在Vue實例中進行了注冊。

最后,需要注意的一點是,當我們使用多個入口時,一定要謹慎處理不同入口之間的代碼復用問題。我們應該將公共的組件和工具類分離出來,避免代碼的冗余和維護難度的提高。