项目场景:
通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上。
问题描述:
对 vue 项目打包后,发现 dist文件中的 index.html 在浏览器中打开后页面内容无法显示,部署到服务器也一样不行,而 vue 项目在本地服务器运行时,页面是正常的。
本地服务器运行的首页:
打包后dist文件夹中的首页:
没看错,是真的什么内容都没有
原因分析:
vue 项目中缺少了 vue.config.js 文件。
vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js 。
解决方案:
在项目根目录手动创建一个 vue.config.js 。
一个 vue-config.js 较完整的字段属性介绍:
module.exports = {
publicPath: "./",
outputDir: "dist",
assetsDir: "static",
indexPath: "index.html",
filenameHashing: true,
lintOnSave: true,
runtimeCompiler: false,
transpileDependencies: [ ],
productionSourceMap: true,
crossorigin: "",
integrity: false,
configureWebpack: () => {},
chainWebpack: () => {},
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: {
'/api': {
target: "http://app.rmsdmedia.com",
changeOrigin: true,
secure: false,
pathRewrite: {
"^/api": ""
}
},
'/foo': {
target: '<other_url>'
}
}
}
}
一般的小项目可能不需要上面这么复杂,按照需求来设置,按照上面的项目(初始化的项目),手动添加一个 vue-config.js 如下:
module.exports = {
publicPath: "./",
outputDir: "dist",
assetsDir: "static",
indexPath: "index.html",
filenameHashing: true,
lintOnSave: true,
runtimeCompiler: false,
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: {
'/api': {
target: "http://app.rmsdmedia.com",
changeOrigin: true,
secure: false,
pathRewrite: {
"^/api": ""
}
},
'/foo': {
target: '<other_url>'
}
}
}
}
项目打包后,输出的项目即可正常显示:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)