Tag Archives: Front end learning

[Solved] Input error: this. Getoptions is not a function

Reproduction steps:

1. The project was created using Vue cli

2. Install less4 x, less-loader10.X development dependency

3. After using lang = “less” in the single file Vue component, the compilation error is found, syntax error: typeerror: this getOptions is not a function

Reason: the version of less loader is too high. Uninstall and reinstall

// uninstall less
npm uninstall less-loader
npm uninstall less

// re-install less3.5.0、less-loader7.3.0
npm i -D [email protected]
npm i -D [email protected]

The solution to the failure of HTML introducing external JS

Problem Description:

JavaScript files are imported from outside the script tag, but it does not work, and the JS code is invalid

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Login</title>
		<script src="js/main.js" type="text/javascript"></script>
	</head>
	
	<body>
		<form action="XXXXXX" method="post" name="login">
			Username: <input type="text" name="username" id="username" /> <br>
			Password: <input type="password" name="password" id="password" /> <br>
			<input type="submit" name="login" id="login" value="登录"/>
			<input type="button" name="logon" id="logon" value="注册" />
		</form>
	</body>
</html>

Cause analysis:

The execution order of HTML code is from top to bottom. The browser parses the HTML code from top to bottom. If JS is introduced into the head, the page tag may not be loaded during JS execution, resulting in the failure of JS to find the action object

Solution:

Just import an external JS file after the body

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Login</title>
	</head>
	
	<body>
		<form action="http://42.192.60.64:8080/user" method="post" name="login">
			Username: <input type="text" name="username" id="username" /> <br>
			Password: <input type="password" name="password" id="password" /> <br>
			<input type="submit" name="login" id="login" value="登录"/>
			<input type="button" name="logon" id="logon" value="注册" />
		</form>
	</body>
	
	<script src="js/main.js" type="text/javascript"></script>
</html>

Using pop-up window and I18N, error in render: “typeerror: cannot read property” appears_ T ‘of undefined’ solution

First, make sure to hang Vue under window.vm in main.js (the name of VM can be customized)

window.vm = new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
})

Secondly, when writing multi language in the pop-up box, you need to add VM.
for example, when writing multi language, you need to write {$t ('xxxxx ')} or this. $t ('xxx')
then you need to write {VM. $t ('xxxxx ')} or this. VM. $t ('xxxxx') or this

Syntax error: unexpected token in uni app project compilation

Syntax error: unexpected token in uni app project compilation

Contents of articles

Syntax error: unexpected token error content error reason solution for uni app project compilation

Error content

Originally, it could run well. When it was pulled down and then run to wechat applet, it would report an error, but the web side could run normally~

Module build failed (from ./node_ modules/mini-css-extract-plugin/dist/ loader.js ):

The details are as follows:

Cause of error

None of the solutions found in the search work.

After a careful examination of the code, it is found that the & lt; script & gt; tag appears twice in a newly modified Vue file. The new one is used to describe the style,

Solution

The problem is solved by merging the content in the new & lt; script & gt; into the & lt; style & gt; tag

Note that there can only be three top-level tags in uni app!!

The root of the problem is that the team didn't communicate well, so there was a problem.. But uni app really has a lot of holes!!!!