1.第一步
npm run build
然后会生成一个dist目录的文件夹
2.将dist文件夹拎出来,我本地已经打好localhost服务器,使用IIs搭建的,如果想输入:localhost:8001/project打开文件,需要在index.js文件配置:

如何让vue项目然后通过ip地址访问,需要在package.json配置项加个 --host 0.0.0.0
"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
3.

build/utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
···
publicPath:'../../', //这里是添加的
····
})
build/webpack.prod.conf.js
output: {
···
publicPath: process.env.NODE_ENV === 'production'
? './' +config.build.assetsPublicPath
: './' + config.dev.assetsPublicPath,//这里是添加的
···
},
config/index.js
build: {
···
assetsPublicPath: './',//这里是添加的
···
}
4.重复第一步npm run build
因为这边我是本地搭建的服务器,菜菜的我不会写接口,只能模拟了,我这边是在服务器指定文件夹下建了个api文件夹,里面放对应的json文件,如果是团队开发,只要把dist文件扔给后端,后端会写好接口的,嗯就这样
5.运行结果对比


6.进一步优化
当项目日趋庞大,打包后的app.js会越大,-----异步组件加载

网友评论