Vue问题记录（持续更新...）

出问题？来看一下吧

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

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

下载的模板中没有router

又是后再初始化一个模板的时候没有选择router，这样就需要手动配置了
再src目录下创建router文件夹，然后创建index.js，内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
    mode: 'history',  //去掉URL中的#，如不需要去掉则删掉这一行即可
    routes: [
        {
            path: '/HelloWorld',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

再main.js中添加代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

这样就可以开始使用路由了

打包后页面无法加载

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

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

    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,修改为：

assetsPublicPath: '/pc/'

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

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

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

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文件：

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