Error: SVG icon referenced

Vue--Module parse failed: Unexpected character ' ' (1:0) (fonts/element-icons.ttf)
Copy the code

Need to be configured?

Ant overrides the default styles

Swiper IE11 is not supported. Use:

NPM install swiper [email protected] --saveCopy the code

Li bound click events don’t work,

Cause: Swiper Is not supported by Internet Explorer 11, and an error is reported. As a result, the click event does not work. After swiper is repaired, the problem does not exist.

When connecting to Alipay, a new window is required to open the payment page

Background:

Place an order in the system > pay, and then open a new window, jump to the Page of Alipay to scan the code to pay

Implementation:

  1. When you click pay, call the order interface and return the order ID
  2. Get the order ID, product name, payment amount, call the payment interface of the background (after the background calls Alipay, return a string of HTML form form) alipay, get the string of form code
  3. Open a new window in the window.open format. The url format is xxx.com? From = XXX
  4. Accept from on the new page and use the binding, the page will be automatically submitted, thus opening the Alipay page

Encountering problems:

Window. open is not compatible with different browsers. Some browsers will truncate the form parameter because it is too long, resulting in the failure to jump to the Alipay page

Solution:

When clicking on the pay button, use pay this way to open a new window, in the new page to query the product information, in the transfer of the order, in the transfer of payment, the returned HTML with V-HTML binding

The return form string looks like this :(because there is a sentence at the end of the form, it automatically jumps to the alipay page after binding with v-html)

<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do?charset=UTF-8' method='POST'><input type='hidden' name='biz_content' value='{" product_code that starts ":" FAST_INSTANT_TRADE_PAY ", "out_trade_no" : "202005231522196239455725", "total_amount" : "122.00", "subject" :" Fuck 1 to 1 course "}'/><input type='submit' value='ok' style='display:none; ''></form><script>document.forms['alipaysubmit'].submit(); Copy the code

When params is used to pass parameters in nuXT routes, name is used instead of path

Routing name renzheng corresponding web pages – step – 2 / renzheng/step / 2. Vue

//$nuxtI can change it to this$nuxt.$router.push({
       name:'renzheng-step-2',
       params:{
         str:JSON.stringify(this.fData)
       }
     });
Copy the code

The page path of

The login information is lost after the page is refreshed

Reference: blog.csdn.net/weixin_4373…

Basically, the user saves the cookie to the cookie after login, and the cookie will be brought to the request in the future. When refreshing the page, the login information in the cookie will be obtained through the middleware and saved to the store. This effect is that the login information in the store will not be lost when refreshing the page

Key code:


//store index.js
const cookieparser = require('cookieparser')
export const state = () => ({
    userInfo: null,
})
exportconst mutations = { userInfoMutations(state, data) { state.userInfo = data; }}export const actions = {
    nuxtServerInit({ commit, state }, { req }) {
        if (req.headers.cookie) {
            if (req.headers.cookie) {
                let userCookie = cookieparser.parse(req.headers.cookie)
                if (userCookie.userInfo) {
                    commit('userInfoMutations', JSON.parse(userCookie.userInfo))
                }
               
            }
          
        }
    },
 
    
}


Copy the code
// Middleware: const cookieparser = require('cookieparser')
export default function ({ store, route, redirect, req }) {
    if(req) {// If a cookie is set after successful login, it will be carried with each requestlet userCookie = cookieparser.parse(req.headers.cookie)
        if (userCookie.userInfo) {
            let userInfo = JSON.parse(userCookie.userInfo)
            if (userInfo) {
                store.commit('userInfoMutations', userInfo)
            } else {
                return redirect('/')}}else {
            return redirect('/')}}}Copy the code

Use of vue-video-player

“Vue – awesome – swiper” : “^ 3.1.3”, SSR usage

.

Vue-awesome-swiper does not switch automatically

swiperOptions: {
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        autoplayDisableOnInteraction: false,
        observer: trueSwiper observeParents automatically initializes swiper observeParents when modifying swiper itself or child elements:true// Automatically initialize a swiper effect when modifying a swiper parent element:"fade",
        pagination: {
          el: ".swiper-pagination"
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        loop: true
      },

Copy the code

The Animate. Use CSS

Plug-in doesn’t work, the way in which nuxt. Config. Js Global CSS to add the following: ‘@ / static/CSS/animate. Min. CSS’,

Static resources in the production environment use CDN

  1. To upload a static file to the OSS, remember which bucket to upload to, my bucket is called bucket-HSq
  2. Start the CDN service, configure the accelerated domain name, here need to note, our website domain name is www.taobao.com, but access to static resources may be like: cdn.taobao.com
  3. Configure CNAME resolution records for domain names
  4. Configure access control for the CDN
  5. Use static.hanshuqiang.top to access the Js file in OSS.
https://bucket-hsq.oss-cn-hangzhou.aliyuncs.com/%E8%AF%86%E5%88%AB%E4%BD%A0%E8%BA%AB%E8%BE%B9%E7%9A%84%E5%AD%A4%E7%8B%AC %E7%97%87%E5%84%BF%E7%AB%A5.mp4?Expires=1589138643&OSSAccessKeyId=TMP.3Kjn5gNub7tpvKpjWt82RZtaYFqQeMXr5bc6tAT43ZUE25UNdP DbKUts2ava8pGeY35E32zgKu9bmBm2E9CxU9vefAPVqn&Signature=W6bjDsEOkn7mijxd%2FLzs6EIJDpA%3DCopy the code

Replace the domain ‘bucket-hsq.oss-cn-hangzhou.aliyuncs.com’ with your own: static.hanshuqiang.top

Verification passed:

At this time of the file access link is a time limit (oss) set, only need in oss set file permissions to read “public” can be used: static. Hanshuqiang. Top/app. 5767 f44… access

How do NUxT layout pages render data on the server side?

In the layouts header, I added the user’s post-login image and name. The background is not rendered on the server because the data is retrieved from the Store.

No solution has been found

VUE version of Baidu editor

Vue-ueditor-wrap, baidu editor background non-Node version, if you use upload video function need to develop, feel this is not suitable for the front-end editor

Push code to the test server

How do I ignore some folders? Publish-sftp problem: in the later use, I found that I could not upload the code when I pushed it to 8%. I don’t know why, so I decided to send the code to the developer by writing an SFTP by myself

HTTPS

Compatibility problems with Internet Explorer

  1. Error: Objects do not support “entries” properties or methods, objects do not support “includes” properties or methods, etc

First, the role:

Check out the compatibility:

What do you do with Babel/Polyfill?

Finally, the solution:

// Use @babel/polyfill //. Babelrc // mainly configuration under polyfills // In vuecli 4.0: es.object.entries instead of es7.object.entries"presets": [["env",
        {
          "modules": false."useBuiltIns": "entry"
        },
        {
          "polyfiljiels": ["es7.object.entries"."es.array.includes"]}],"stage-3"]}Copy the code

Array.find() is not supported in Internet Explorer 11. Solution: As with polyfiljiels, append an es.array.find to polyfiljiels

Mobile adaptation issues after using third-party style libraries (Vant)

The plugin postCSS-pxtorem was used to solve the mobile adaptation problem, but found

The configuration is as follows:

/*
  ** Build configuration
  */
  build: {

    extend(config, { isDev, isClient }) {

    },
    postcss: {
      plugins: { 'postcss-pxtorem': { rootValue: 16, propList: [The '*'] } }, preset: { autoprefixer: true}}}Copy the code

Problem of foresight

The width of the design draft is 750px,rootValue is set to 16, the style written by myself is ok, but there are problems with the adaptation of the third-party library

Solution

Reference: blog.csdn.net/qzf_haineng…

NPM I-S amFE-Flexible, NPM I postCSS-px2REM-exclude nuxT configuration file:

  /*
** Build configuration
*/
build: {
  extend(config) {
  },
  postcss: {
    plugins: {
      'postcss-px2rem-exclude': {
        remUnit: 75,
        exclude: /node_modules|folder_name/i
      }
    },
    preset: { autoprefixer: true}}}},Copy the code

H5 poster composition

Question: The poster has the background picture, the content picture, the content TWO-DIMENSIONAL code, the content text, as shown below, the red box is dynamic:

Needs: In H5, synthesize posters for different products and share them with others. Long – press in the browser to save the image locally.

Problem 2: The green image in the poster is a web image that was not generated when html2Canvas was used to turn a div into an image

Solution:

Use HTML2Canvas to convert DOM to Base64. Note: The green image in the poster on OSS needs to be converted to base64 in advance and placed in the poster img=”base64Str” before html2Canvas can be successfully converted. A time rub parameter needs to be added when the image is requested