VUE 遇到的问题

最新推荐文章于 2023-12-22 09:28:54 发布

liuye066

最新推荐文章于 2023-12-22 09:28:54 发布

阅读量949

点赞数

分类专栏：混合开发 H5 文章标签： html ios css

本文链接：https://blog.csdn.net/liuye066/article/details/112672248

版权

H5 同时被 2 个专栏收录

22 篇文章 3 订阅

订阅专栏

混合开发

21 篇文章 1 订阅

订阅专栏

1. iOS 点击组件时，出现黑色的边框：

这个是ios兼容的问题，因为safari有自带的默认样式，只需要设置

-webkit-tap-highlight-color:rgba(0,0,0,0)

或

-webkit-tap-highlight-color: transparent;   //设置为透明

就可以了。

这个意思是发生tap事件时高亮背景色设为透明就不影响其他样式了。

网上很多资料点击出现蓝色或黄色边框时，加 outline:none，在这里不管用。

2. vue 报错 Failed to mount component: template or render function not defined.

      component: {
        default: EnergyTitle,
        a: routerDemo
      }

component加上s即可

    components: {
        default: EnergyTitle,
        a: routerDemo
      }

3。 VUE打包，需要打包到特定目录build下

（1）使用下面方式创建的VUE项目，项目生成时，已经生成了build目录，里面是项目构建(webpack)相关代码；

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

目录结构：

打包时需要修改package.json和config/index.js

package.json中在原来默认的基础上增加& cd ./build && pktool -k HulianPingtai

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js & cd ./build && pktool -k HulianPingtai"
  },

config/index.js则将原来的dist目录修改成build，将assetsPublicPach由‘/’改成‘./‘，则可以避免打开index.html出现空白页

// Template for index.html
    index: path.resolve(__dirname, '../build/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../build'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

这样打包生成的文件就会出现在build目录下了。目录结构如下：

（2）使用vue-cli3创建的项目：

目录结构：

打包时需修改package.json中的

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "npm run probuild",
    "lint": "vue-cli-service lint",
    "devbuild": "vue-cli-service build --mode development --dest build && cd ./build && pktool -k HulianPingtai",
    "probuild": "vue-cli-service build --mode production --dest build && cd ./build && pktool -k HulianPingtai"
  },

打出来的包，点击index.html是空白的。需要增加路径配置：

在根目录下创建文件vue.config.js，配置

module.exports = {
    assetsDir: 'static',
    parallel: false,
    publicPath: './',
}

打包出的目录结构是这样的：

css和js目录都在static目录中。与实际要求不符，vue.config.js需要修改成：

module.exports = {
    publicPath: './',
}

这样打出来的包才是要求的

4。vue.config.js的其他设置：

打包后网页的入口是public文件夹index.html,标题名称设置是：

<title><%= htmlWebpackPlugin.options.title %></title>

修改和设置title:

vue.config.js中

// 修改或新增html-webpack-plugin的值，在index.html里面能读取htmlWebpackPlugin.options.title
    chainWebpack: config =>{
        config.plugin('html')
            .tap(args => {
                args[0].title = "平台";
                return args;
            })
    },

其他设置：

/* 输出文件目录：在npm run build时，生成文件的目录名称 */
  outputDir: "dist",
  /* 放置生成的静态资源 (json、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
  assetsDir: "static",
/* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
  productionSourceMap: false,
  lintOnSave: false,

5。VUE加载网络图片，显示不出来：

项目需要展示几张网络图片，本来以为很简单，结果死活出不来网络图片，然后网络地址在浏览器可以正常访问。

解决办法：

找到index.html 在head加下面一个标签，即可。

<head>
	<meta name="referrer" content="no-referrer">
</head>

6。vue 文件头部固定位置，下方自由滚动；

.headDiv {
        position: fixed;
        z-index: 100;
        /*固定定位*/
        top: 0;
        width: 100%;
    }

加上这段代码后，头部能固定，但头部的内容会溢出屏幕显示，需要在要固定的组件外面，包裹一层，再加上这个class

        <div class="headDiv">
             <NavBar title="更多商品">
                <span slot="left">
                    <img src="./../assets/back.png" width="12" height="20" align="left" @click="backReturn()">
                </span>
                        <span class="header_login" slot="right" v-show="false">
                </span>
            </NavBar>
        </div>

7。列表页加载完后，不是从顶部开始显示的

加载完列表数据后，加上一句

window.scrollTo(0, 0);//回到顶部

整体代码：

created () {
            var self = this
            this.userId = this.$route.params.userId
            this.offUserId = this.$route.params.offUserId
            // console.log('create param', JSON.stringify(this.$route.params) + ',' + this.$route.fullPath + ',' + JSON.stringify(this.$route.query))
            Request.getGoodsList(api, this.page, 20, Global.entrance).then(result => {
                var goodsList = result.retData.data.result.data
                for (let i=0;i<goodsList.length;i++) {
                    if (i % 2 == 0) {
                        var item = goodsList.slice(i,i+2)
                        self.goods.push(item)
                    }
                    // console.log('Goods created' + JSON.stringify(goodsItem))
                }
                console.log('Goods created' + self.goods.length)
            }).catch(error => console.log('Goods error', error))
            
            window.scrollTo(0, 0);//回到顶部
        },

8。按钮点击后，出现黄色边框：

/*去除黄色边框*/
outline: none;

9。导航栏固定在上方后，下方上下连续滚动时，上方的导航栏会抖动：

在导航栏控件外面罩上一层<div class="headDiv">，

    .headDiv {
        position: fixed;
        z-index: 100;
        /*固定定位*/
        top: 0;
        width: 100%;
        /*-webkit-transform: translateZ(0);*/
    }

10. 禁止长按复制

*{
  -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
  -webkit-user-select:none; /*webkit浏览器*/
  -khtml-user-select:none; /*早期浏览器*/
  -moz-user-select:none; /*火狐*/
  -ms-user-select:none;  /*IE10*/
  user-select:none;
}

liuye066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE 遇到的问题

1. iOS 点击组件时，出现黑色的边框：这个是ios兼容的问题，因为safari有自带的默认样式，只需要设置-webkit-tap-highlight-color:rgba(0,0,0,0)就可以了。这个意思是发生tap事件时高亮背景色设为透明就不影响其他样式了。网上很多资料点击出现蓝色或黄色边框时，加 outline:none，在这里不管用。...
复制链接

扫一扫

专栏目录