1 Basic question
1 Need to deploy the project
1 Proposal for testing (submitting test)-Both front and back ends must submit code-Deploy on the company intranet (internal server or intranet)-(that is, only people within the company can access)
2
Go online-Deploy the code on the cloud server 2 Deal with the problems that need to be paid attention to when packaging and going online
3 Project packaging-npm run build-is to compile the source code in the development environment-into the code that the browser can recognize
2 Online related issues
1 Image issue
1 Image placement location – no matter which way, it must be managed in a modular way – that is, as long as the image is used, it must be modularly managed.
1 Remote absolute address – is to use your own back-end image.
1 Is it packaged and online? There are any problems.
2 In the local src/assets directory-you can consider placing some very small images.
1 You can use relative paths.
2 Webpack only handles the name of the images here-no size processing.
3 These processed images will change. As part of the code-the image is too large and will affect the efficiency of code execution.
3 Local public directory
1 Path setting-/logo.jpg-http://localhost:8080/logo.jpg-the path under the root directory
2 Webpack will not Do any processing on resources in public
3 Only pictures in public-CDN picture optimization can be done when online-that is static resource acceleration
2 Principles of image usage
1 The image is directly still in the public directory-Don't put it in src/assets in non-special circumstances In the catalog
2 use a modular approach-centralized management of the image path code --> Tools --> Vue --> package and go online --> centralized management of the image path
2 api interface path problem
1 local cross-domain agent (development environment) – After packaging, it does not take effect – that is, going online also involves cross-domain – going online still needs to be solved in other ways
2 Pay attention to the modification-baseURL-Intranet address during testing-that is to provide data-protocol + domain name + port-address
3 Understanding-development-baseURL == our local address-requesting our back-end data to perform a cross-domain Proxy configuration
4 Understand – when testing – baseURL == our back-end address – when deployed to the back-end – to put it bluntly is the server address that provides data
5 Understand – when going online – baseURL ==
6 Note a pit – if your back-end network cable One click – it will change the address – we can’t request the data normally when we test.
3 Project file path problem – solves the path problem of all static files – basically needs to be changed when it goes online.
1 The default package is online and it doesn’t work properly. -Because the configuration file-vue.config.js-publicPath:'/'-the default is /
2 Normal situation-we put'/' -->'./'-the file after that can normally find the corresponding project file – This configuration item will not be automatically generated and you need to add
3 by yourself. Situation 1 – On the server we bought – multiple projects may have been deployed – so when we go online, we must clearly know what directory the resource files of the current project are deployed in.
4 Situation 1 – According to the server’s directory structure – Set our – publicPath:'/pc/' – Indicates that the current project is deployed – under the pc directory of the cloud server.
5 Case 2 – There is another case – when it goes online – css, img will be added Part of the files are moved to another CDN server for static resource acceleration
6 Case 2-According to the CDN server settings-publicPath:'http://baidu.com/cdn/hh/'-To put it bluntly, it is to request a static resource with an absolute path-Under the hh directory under cdn
7 Understand-its role is – Let our index.html – we can normally import the static resource files we need – that is css, js, wait for these files
8 to understand – that is – after our project goes online – import these css files – they cannot be accessed through relative paths -Generally not deployed in the root directory of the
9 path syntax-./ is equivalent to not adding-/ root path-@/ src directory
4 routing mode
1 Hash mode-Hash-packaged online without any problems
2 History-online deployment Hour-Refresh will appear 404-Backend Nginx/Apache is required for redirection processing
3 Other issues
1 Cloud server-the server that provides data from the server manufacturer-a super large-always running computer
2 Local test-the packaged dist file-throw it to the test and it will be OK
3 Vue and React projects Does not support IE678
4 Get a server by yourself – test the overall process
5 The packaged project file name – there will be a hash value field
1 So we repackaged the file – our file name will be changed from the previous one
2 The browser will Cache our project resources – if we don’t find that our project’s static resource names have changed – we will use the cached resources.
3 So every time we package and modify – the project file name – there will be changes – the browser will refresh the page – but not Go to read the cached resources
4 This can be turned off-but generally not closed
6