使用vue init webpack <項目名稱>建立項目，安裝babel-polyfill（npm i babel-polyfill -S）
目錄調(diào)整
目錄結(jié)構(gòu)
目錄結(jié)構(gòu)說明：
- 新建目錄project，在這個目錄下一個文件夾為一個項目，文件夾名稱為項目名稱，即一個文件夾為一個頁面入口。如：index,login兩個入口
- 將根目錄中的index.html移入src/project/index/下，main.js、App.vue兩個文件移入src/project/index/下
- 創(chuàng)建request目錄，向服務端接口請求的業(yè)務都放到這個目錄下，所有入口公用
- 目錄components，各入口公共的模塊放到這個目錄下
- 目錄store，放全局狀態(tài)，如用戶token，當前用戶信息等
- project/index/建立目錄：assets、pages、router、store，這些目錄是各項目自理的業(yè)務、頁面、模塊、狀態(tài)等
- 將project/index/下的目錄和文件復制到project/login/目錄下，多加一個入口就建一個目錄，復制這些目錄和文件到新入口
開始配置多入口
- build/webpack.base.conf.js
module.exports = {
entry: {
index: ['babel-polyfill', './src/project/index/main.js'],
login: ['babel-polyfill', './src/project/login/main.js']
},
... // 省略沒有變化的代碼
}
- build/webpack.dev.conf.js
原：
module.exports = merge(baseWebpackConfig, {
...
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
改成：
module.exports = merge(baseWebpackConfig, {
...
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/project/index/index.html',
inject: true,
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/project/login/index.html',
inject: true,
chunks: ['login']
}),
new FriendlyErrorsPlugin()
]
})
- build/webpack.prod.conf.js
原：
var webpackConfig = merge(baseWebpackConfig, {
...
plugins: [
...
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// split vendor js into its own file
...
]
...
})
改成：
var webpackConfig = merge(baseWebpackConfig, {
...
plugins: [
...
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: './src/project/index/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest','vendor','index']
}),
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'login.html'
: config.build.login,
template: './src/project/login/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest','vendor','login']
}),
// split vendor js into its own file
...
]
...
})
- config/index.js
原：
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 3000,
autoOpenBrowser: false,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
改成：
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
login: path.resolve(__dirname, '../dist/login.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 3000,
autoOpenBrowser: false,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
配置完成，開始試驗
- npm run dev啟動項目
- 因為兩個項目中的文件是復制的，內(nèi)容一樣，為了區(qū)分。
index/App.vue文件中加入<h1>index</h1>
login/App.vue文件中加入<h1>login</h1> - 訪問localhost:3000
index
- 訪問localhost:3000/login.html
login
確認已經(jīng)通過不同的入口進入不同的頁面（子項目），根據(jù)各自子項目業(yè)務分別開發(fā)。
補充
- 為了方便項目中路徑的訪問，為項目增加別名
build/webpack.base.conf.js文件修改
module.exports = {
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// 增加以下兩行
'index': resolve('src/project/index'),
'login': resolve('src/project/login')
}
},
}
