出问题？来看一下吧

前面用使用vue出现了很多问题，一直没有记录，现在就最近再次遇到的问题记录一下。

版本：Vue 2.X 工具：Hbuilder X

打包后页面无法加载

我这里打包后是放到tomcat服务器下运行的，但是运行的时候因为有些配置有问题，导致所有页面都加载不了。主要还是加载路径的问题，解决方法：

build目录的utils.js文件,一般在47行左右。添加publicPath:'../../'

1
2
3
4
5
6
7
8
9
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
publicPath:'../../',
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

config目录的index.js文件,一般是在46行的assetsPublicPath,修改为：

1
assetsPublicPath: '/pc/'

pc就是你放在Tomcat服务器下的工程名

手动刷新页面css样式错误问题

运行项目时有时候点击浏览器的刷新或者F5刷新后css样式就会全部乱掉，这个问题解决方法是把css全部放进main.js中导入，就像这样：

1
2
3
4
5
6
7
import "../static/css/bootstrap.min.css"
import "../static/css/essentials.css"
import "../static/css/layout.css"

import "../static/css/header-1.css"
import "../static/css/layout-shop.css"
import "../static/css/color_scheme/orange.css"

注意路径问题。如果有路径错误项目就会运行不成功，仔细看看错误信息排查就好了。

URL路径#号问题

vue-router默认hash模式，如果不想要很丑的hash，我们可以用路由的history模式。修改router下的index.js文件：

1
2
3
4
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})