使用vue init webpack <項(xiàng)目名稱>建立項(xiàng)目耻瑟，安裝babel-polyfill（npm i babel-polyfill -S）
目錄調(diào)整
目錄結(jié)構(gòu)
目錄結(jié)構(gòu)說明：
- 新建目錄project县昂，在這個(gè)目錄下一個(gè)文件夾為一個(gè)項(xiàng)目暖哨，文件夾名稱為項(xiàng)目名稱脸哀，即一個(gè)文件夾為一個(gè)頁面入口每篷。如：index,login兩個(gè)入口
- 將根目錄中的index.html移入src/project/index/下，main.js镐牺、App.vue兩個(gè)文件移入src/project/index/下
- 創(chuàng)建request目錄炫掐，向服務(wù)端接口請求的業(yè)務(wù)都放到這個(gè)目錄下，所有入口公用
- 目錄components睬涧，各入口公共的模塊放到這個(gè)目錄下
- 目錄store募胃，放全局狀態(tài)沛厨，如用戶token，當(dāng)前用戶信息等
- project/index/建立目錄：assets摔认、pages、router宅粥、store参袱，這些目錄是各項(xiàng)目自理的業(yè)務(wù)、頁面秽梅、模塊抹蚀、狀態(tài)等
- 將project/index/下的目錄和文件復(fù)制到project/login/目錄下，多加一個(gè)入口就建一個(gè)目錄企垦，復(fù)制這些目錄和文件到新入口
開始配置多入口
- 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
}
}
配置完成环壤，開始試驗(yàn)
- npm run dev啟動(dòng)項(xiàng)目
- 因?yàn)閮蓚€(gè)項(xiàng)目中的文件是復(fù)制的，內(nèi)容一樣钞诡，為了區(qū)分郑现。
index/App.vue文件中加入<h1>index</h1>
login/App.vue文件中加入<h1>login</h1> - 訪問localhost:3000
index
- 訪問localhost:3000/login.html
login
確認(rèn)已經(jīng)通過不同的入口進(jìn)入不同的頁面（子項(xiàng)目），根據(jù)各自子項(xiàng)目業(yè)務(wù)分別開發(fā)荧降。
補(bǔ)充
- 為了方便項(xiàng)目中路徑的訪問接箫，為項(xiàng)目增加別名
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')
}
},
}
