项目基于webpck4 + vue2 + vuex
,无论百度、google,各种说法的都有,然而木有用
试了官网的关于嵌套路由的代码,刷新一样有这个问题
import Index from "./pages/index/index.vue";
import Login from "./pages/login/login.vue";
export default {
mode: "history",
routes: [
// 首页
{
path: "/",
component: Index,
meta:{
title: '小牛在线 — 中国领先的互联网金融平台_专业P2P网贷平台'
}
},
// 登录
{
path: "/user/login",
component: Login,
meta:{
title: '我的'
}
}
]
};
...省略...
// 模式
mode: "development",
// 开发调试
devtool: "cheap-module-eval-source-map",
devServer: {
// 内容路径
contentBase: path.join(__dirname, "../src"),
// gzip压缩
compress: true,
// 端口
port: 9000,
// 代理
proxy: {
"/api": {
target: "http://localhost:3000",
pathRewrite: { "^/api": "" }
}
},
historyApiFallback: true,// 如果为 true ,页面出错不会弹出 404 页面
},
// 输出=>https://webpack.docschina.org/configuration/output/
output: {
filename: "js/[name].[hash].js",
path: path.resolve(__dirname, "../dist"),
},
...省略...
网上没办法,就还是得自己解决。最后把注意力放在webpack生成js路径上,即html-webpack-plugin
插件
查阅html-webpack-plugin文档,会发现html的js路径是由webpack的output
决定的,继续查阅output
文档,发现有publicPath
属性用于设置cdn的路径。
如果把publicPath
设为/
绝对路径会怎样? 重新运行npm run dev
设置webpack.dev.conf.js
文件的output的publicPath
属于为绝对路径,问题解决
// 输出=>https://webpack.docschina.org/configuration/output/
output: {
filename: "js/[name].[hash].js",
path: path.resolve(__dirname, "../dist"),
publicPath:'/'
},
html-webpack-plugin参考:https://webpack.docschina.org/plugins/html-webpack-plugin/#src/components/Sidebar/Sidebar.jsx
output参考: https://webpack.docschina.org/concepts/output/#src/components/Sidebar/Sidebar.jsx
表格如果字段多,有横向滚动条是不是不方便?可拖拽的滚动是不是就方便了?
使用create-vue创建vue3项目,vite,vue3
相对VUE2 ,VUE3做了哪些优化和改进呢?
vue项目,不使用window.location.reload(),如何刷新当前页面?
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
vue2.0 v-html指令有潜在的xss风险,如何解决?
vue项目通过axios怎么下载二进制文件或图片?
ant.design UI框架 同时使用v-model或value属性时, placeholder不显示
如何在VUE项目中添加stylelint,检查css,scss,less的语法问题,保证团队代码的规范统一
VUE全局函数
定义了服务端渲染的属性名称常量SSR_ATTR,定义了一些资产类型常量ASSET_TYPES,定义了生命周期相关钩子函数的函数名称
使用iviewui-admin框架构建管理系统时,遇到的各类问题
vue项目中动态图片路径拼接
vue下filter方法的调用
21个vue顶级UI框架: Vuetify,Quasar,Vue Material,Keen-UI,Buefy,Bootstrap Vue,Muse-UI,AT-UI,Vux,iView,Uiv,Vuikit,Onsen UI+Vue,Semantic UI+Vue,Fish-UI,Mint UI,Framework7 Vue,Cube UI,Vueblu,Ant Design Vue
".vue"文件是如何解析成js对象的~
立个flag,看过年这段时间能不能把vue的源码读完?多年前看过jQuery的部分源码,如果想要更深入的了解vue,还是得从源码开始
vue源码阅读,慢慢学习
vue的生命周期函数
vue组件的数据data为什么一定要是函数 ?
Mint-ui this.$messagebox点取消时,报错:Uncaught (in promise) cancel
vue-validate使用
这就是个vue的坑。。。
vue如何监听enter事件?
vue使用axios进行form表单提交
vue中如何改变title标题
如果在vue2.0中使用NProgress进度条
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。也是vue2.0官方推荐的,同时不再对vue-resource(vue1.0使用)进行更新和维护
分析Vue.js源码
npm run dev模式下,webpack4+vue2项目下,类似'/user/login'二级路由,刷新时静态资源路径不对,静态资源返回404
[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
did you register the component correctly? For recursive components, make sure to provide the "name" option
vue.js如何查看注册了哪些组件,获取组件名称
vue底层的Virtual DOM就是基于snabbdom修改的