本文参考:https://blog.csdn.net/Tank_in_the_street/article/details/73732801
进入\build\webpack.base.conf.js目录下,在module.exports的域里,找到entry,在那里配置添加多个入口:
entry: {
app: './src/main.js',
login: './src/login.js'
},
接下来就是对开发环境run dev里进行修改,打开\build\webpack.dev.conf.js文件,在module.exports那里找到plugins,下面写法如下:
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
// HMR shows correct file names in console on update.
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks: ['app']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: 'login.html',
inject: true,
chunks: ['login']
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
之后就对run build也就是编译环境进行配置。首先打开\config\index.js文件,在build里加入这个:
index: path.resolve(__dirname, '../dist/index.html'),
login: path.resolve(__dirname, '../dist/login.html'),
然后打开/build/webpack.prod.conf.js文件,在plugins那里找到HTMLWebpackPlugin,然后添加如下代码:
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',
chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
filename: config.build.login,
template: 'login.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',
chunks: ['manifest', 'vendor', 'login']
}),
配置完了,接下来新建一个login.html
和login.js
, and login.vue
login.js
可以这样写
import Vue from 'vue'
import login from './login.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#login',
render: h => h(login)
})
login.vue
<template>
<div id="login">
<login></login>
</div>
</template>
<script>
import login from './components/login'
export default {
name: 'login',
components: {
login
}
}
</script>
启动项目。。。。
,
,
,
,
,
然后,
,
,
,
,
,
失败了。。。。
报了个错:vue Uncaught RangeError: Maximum call stack size exceeded
经过一系列的查找,终于找到什么错了,原来我的两个vue文件重命了,大家都叫login.vue
,改掉另外一个就可以了