vue 开发常见问题解决大全

vue添加favicon.ico,包含开发环境和生产环境显示。

1.把图标放在下项目的根目录。

image

2.修改build文件夹下面的webpack.dev.conf.js（开发环境） 和webpack.prod.conf.js（生产环境）。添加代码如下：

favicon: path.resolve('favicon.ico'),

webpack.dev.conf.js（开发环境）：

image

webpack.prod.conf.js（生产环境）：

image
3.修改完成之后，然后重新启动，记住每次修改完配置，都要重新启动，后面不再重复描述。

vue打包产生多余的.map文件。

1.修改config文件夹下的index.js文件，把productionSourceMap: false,设置为false。

image

去除url的#号

1.在router文件夹里面的index.js里面添加

mode: 'history'

路由懒加载

1.修改router文件夹里面的index.js，删除原来的引入文件的方式，改成

routes: [
    {
      path: '/',
      name: 'index',
      component: resolve=>(require(["@/components/index"],resolve))
    }
  ]

image

使用less

1.安装依赖包

npm install less less-loader --save-dev

2.然后在vue文件中使用，lang="less"和@import

image

手机局域网允许访问项目

1.修改config文件夹里面的index.js文件，把里面的host’:'localhost'修改为：host: '自己的ip地址'。

image

然后重启项目，即可通过ip访问到项目。

keep-alive使用

场景：
列表页面，详情页面，编辑页面，三页面之间交互之后数据缓存。
1.路由配置文件index.js

image

2.App.vue

image
3.列表页面
image
4.编辑页面
image

5.详情页面

image

我这个是比较全面的仔细的，最后把这些方法提到公共方法里面操作。这里不做介绍了。

上面就是一些较为常用并且实用的vue问题。具体的每个修改文件，我已经传了项目到码云上面，并且在里面做了tag标记，大家可以进去查看全部代码。
码云本项目地址：https://gitee.com/xiaoqiuxiong/vue_study
觉得对自己有用的，望各位基友点个赞赞赞！！！！！！！