Elmentui form. When setting input type = number, remove the up and down arrows
<style lang="scss" scoped>
/deep/ input[type="number"] {
-moz-appearance: textfield;
}
/deep/ input[type="number"]::-webkit-inner-spin-button,
/deep/ input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
</style>
When you write the name to the component, you find this error. Take a closer look at the name of the introduced sub component
Solution: change name
‘webpack dev server’ is not an internal or external command, nor is it a runnable program or batch file. Solution
error report when executing cnpm run dev:
resolvent:
Now to use webpack you have to install both the package webpack-cli to be able to invoke the commands webpack and webpack-dev-server.
cnpm install webpack webpack-dev-server webpack-cli --save-dev
After modifying the code, restart the project, and the progress card will not move at 69%
and report an error
Browserslist: caniuse-lite is outdated.
Reason: a component has more than one root element (vue2. X)
The error message is as follows
[Vue warn]: Error in v-on handler (Promise/async): "Error: Error"
found in
---> <Navbar> at src/layout/components/Navbar.vue
<Layout> at src/layout/index.vue
<App> at src/App.vue
<Root>
The solution is as follows
1. F12 enter the developer mode and click the area in the box
2. Check the response code, which is the value on the right side of res.code
3. Add code to easy mock
solve
Method 1: set Axios in main.js method 2: if Axios is encapsulated into request
In the process of doing the project, due to the large amount of data requested, the request timed out, so this error was reported. The timeout time of 5000ms was set when Axios was configured. We can solve this error by changing this setting
Method 1: set Axios in main.js
Set the timeout of Axios in main.js, but it is generally not available. You need to set it yourself. Then main.js can be found under SRC of your project, and add Axios. Default. Timeout = 50000 in it, which means that setting the timeout to 50 seconds should be enough
Method 2: if Axios is encapsulated into request
If the first method is not used at all, you can change it in another setting:
here
After checking some data, it was found that the data was passed from the back end to the front end, and the front end did not handle it well, so an error was reported
Problem: because I want to load a list El table, the required data format is as follows
// Required data format for el-table's :data
[{...} ,{...} ,... ,{...}]
// The format of the data returned by the backend, I returned it directly to :data, which is obviously not correct, it should wrap a []
{...}
Based on this, the way of processing data is not right
// For example, if you deconstruct a res object from the backend, you only need [res] or [res.xx] to solve the problem
// Instance:
getUserByName(name).then(res => {
console(res) // you can look at the format of res in the background, what you really want, and then take it out by way of .xxx
this.userList = [res.data]
})
// I'll go back to el-table here and put :data=userlist to fix it
This is because the parser names of different versions of prettier are not the same, so it cannot be parsed. You just need to node_ Modules in Vue loader The parser in the prettier configuration file can be changed from Babylon to Babel.
Step 12345 as shown in the figure below
##Using webpack to report typeerror: this.getresolve is not a function
###Error reason: the webpack version is too low or the loader version is too high
this is the original configuration version
##Solutions:
1. Upgrade the version of webpack to the highest version (there are many changes in the version of webpack, so I’m afraid it won’t catch up with others, So you can choose not to change the webpack version)
2. Reduce the version of the loader
(1) manually reduce the downloaded version of the loader in package.json
(2) download the loader you just used again
and then run it again
When creating a project, vuecli4 always fails to report an error. Command failed: NPM install — loglevel error
installing the Taobao image is also an error.
the way to find it on the Internet
NPM install chromedriver — chromedriver_ cdnurl= http://cdn.npm.taobao.org/dist/chromedriver
After completing the operation, re create the project Vue create****
My installed version is as follows:
node – V
v14.16.1
npm -v
6.14.2
vue -V
@vue/cli 4.5.12
npm install chromedriver –chromedriver_ cdnurl= http://cdn.npm.taobao.org/dist/chromedriver
vue create
So it worked
The first stage: modify the initial path access in the framework
The default access address was modified. Because I was not familiar with the configuration of the framework at that time, and there was no architecture related documentation, the attempt failed. Although the modification is completed, you can directly access the home page of the portal according to the domain name, but the back-end business can’t be accessed normally. I doubt that I have changed something. If you are familiar with ruoyi architecture and have completed this modification method, please give me more advice.
The second stage: using nginx to separate the front and back of the portal
The portal page of the website uses static HTML pages, and then the data request is implemented through Ajax. Configure two domain names to resolve to the server where the service is located, the first level domain name to access the portal related functions, and the second level domain name to access the background management page. Two schemes are prepared. One is to simply use HTML and Ajax. First, nginx forwards the request to the HTML page according to the domain name, and then uses Ajax to get the data from the background when the page is initialized. The second is to use Vue, which is actually an optimization on the first one. Through the loop contained in Vue and other tags, it is easy to load and echo the data, but When the page is loaded, the unresolved Vue variables will be displayed first. The experience is very poor, so this method is abandoned. I think the efficiency and page rendering experience of the first method will be very poor, so in the case of other implementation methods, I will not consider this method for the moment. In fact, these two methods can achieve basic requirements such as data loading.
The third stage: directly using the page of the original project
At the beginning, I didn’t think of this method, but later when I modified the second method, I suddenly thought that according to the previous project experience, I can do redirection jump in nginx, so I began to try this way. The basic idea is: configure two servers in nginx to monitor port 80, and judge which server to enter according to the domain name. When the access is a first-class domain name, judge the website related business, that is, judge whether the URL contains only the domain name. If it contains only the domain name, then redirect the request to the path of the portal home page. For other requests, handle them normally .
No more nonsense. Go directly to nginx configuration
server {
listen 80;
server_name ywgl.*****.com;
index index.html;
set $ht_server 127.0.0.1:8080;
location /{
proxy_pass_header Server;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_pass http://$ht_server;
}
}
server {
listen 80;
server_name www.******.com;
index index.html;
set $mh_server 127.0.0.1:8888;
location /{
proxy_pass_header Server;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
if ($request_uri ~* "^/$") {
rewrite ^/(.*)$ http://www.******.com/home/index?; # Preventing multiple redirects
}
proxy_pass http://$mh_server ;
}
}explain:
$request_ Uri ~ * “^/$” this condition is to determine whether the access request is www. * * *. Com, not www. * * *. COM/*/*, because even if the access request is www. * * *. Com, nginx will send a $request_ What URI gets will still contain a ‘/’.
Finally, if you have any ideas, welcome to exchange.