今天打包项目完之后,打开index.html去看看有没有什么发题,一打开奇怪的事发生了,居然是空白
如图
打开控制台之后,如图
百度了半天发现是文件引入的路径出问题了,于是我将打包之后的index.html中的各种引入的都修改了路径,错误是没有了,但是页面还是空白,然后还是各种查找~~~~
最后皇天不负有心人,终于解决了,下面就是解决的办法,希望能给各位带来帮助,
在项目根目录下新建文件vue.config.js(与src在同一目录),并配置如下:
module.exports = {
// 修改的配置
// 将baseUrl: '/api',改为baseUrl: '/',
// baseUrl: '/',3.0 被弃用改为 publicPath
outputDir: 'dist',
/* assetsPublicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',*/
// publicPath:'./',
assetsDir: 'assets',
publicPath:'./',
devServer: {
/* open: true,
host: "localhost", //本地真机测试
// host: "localhost",
port: 8888,*/
// proxy: {
// '/api': {
// target: 'http://wjdr.51xpx.com/',
// changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// }
// },
// '/baofoo': {
// target: 'https://bht.mandao.com',
// changeOrigin: true,
// pathRewrite: {
// '^/baofoo': ''
// }
// }
// },
stats: {
children: false,
},
},
css: {
loaderOptions: {
// 给 less-loader 传递选项,开启less的javascript选项
less: {
javascriptEnabled: true
}
}
}
};
原文在这里[https://blog.csdn.net/qq_38969618/article/details/104156205?ops_request_misc=&request_id=&biz_id=102&utm_term=vue2.x%E6%89%93%E5%8C%85%E4%B9%8B%E5%90%8E%E7%A9%BA%E7%99%BD&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-9-.pc_search_result_before_js&spm=1018.2226.3001.4187] 感兴趣的可以去看一看,
配置好之后,再进行打包命令,命令这里相信大家都会。
-----------------------------
最后再说几个点,如果你打包的是pc端的项目,并且用的是elementUI框架的话,其中代码中要跳转页面使用的是<el-link></el-linke>
标签的话,修改成<router-link></router-link>
不要忘了将 href 改为 to,
还有一个是,如果你的mode是history的话,改成hash
来看看他们的区别:
- hash模式url带#,histroy模式url不带#
- hash模式解决了通过http请求来切换页面,改变路径可以直接改变页面,无需进行网络请求,这叫前端路由,在hash模式下改变的是#中的信息
- history模式,可以前进和后退,但是不能刷新页面,刷新之后就会报错。如果后端没有对路由地址进行相应的处理,那么就会报404的错。
- hash浏览器支持率比较好,支持低版本的浏览器,但history的方法只支持部分浏览器。
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
至此,本次的分享到此结束,如果大佬们还有更好的建议,希望不吝赐教。