问题就是vue项目打包后,打开的是空白页面,,还有很多的文件路径的错误
网上找了很久,大多是脚手架2的解决方法
脚手架3的解决方法和脚手架2差不多,不过脚手架3取消了的很多的配置文件,所以需要在项目根目录下创建文件名为vue.config.js的配置文件(必须是这个文件名,不然读取不到)
文件中的内容如下:
const path = require('path')
module.exports = {
// 对象和函数都可以,如果要控制开发环境可以选择函数
configureWebpack:{
resolve:{
alias:{
'assets':path.resolve('./src/assets'),
'common':path.resolve('./src/common'),
'components':path.resolve('./src/components'),
'network':path.resolve('./src/network'),
'views':path.resolve('./src/views')
}
}
},
devServer: {
proxy: {//配置跨域
'/apis': {
target: 'http://pv.sohu.com',//
ws: true,
changOrigin: true,//允许跨域
pathRewrite: {
'^/apis': ''//请求的时候使用这个api就可以
}
}
}
},
//修改打包路径规则
///上面的可以不需要,重点在这
publicPath: './',//
outputDir: 'dist',
devServer: {
proxy: {
'/api': {
target: '',
ws: true,
changeOrigin: true
}
}
}
}
如果还设置了路由的规则,及设置成了 history 模式,则需要将模式改回去或注释掉,不然静态文件依然找不到
const router = new VueRouter({
mode: "history",//注意 打包时需要将该处注释 否则将出现静态文件找不到
base: process.env.BASE_URL,
routes,
});
然后重新打包即可
若有es6的问题,则参考如下文章(虽然我的项目中也有es6的语法,但是好像并没有影响)
参考文章:https://www.jianshu.com/p/f6e3103a931f
小白爱记录,排错不迷路