Access resources in the server through domain names

Hello everyone, I am Xiongxiong. Welcome to follow the WeChat public account: Xiongxiong’s Little Classroom

Preface

In the course of daily projects, we may often encounter such scenarios.

Upload resources, such as pictures or videos, to the server. After uploading, we store the path of the file in the database, and then directly obtain the uploaded file through the path when using it on the front end.

So, in vuethe project, after we upload the files to the server, how do we obtain the uploaded files through the domain name? Let’s take a look today.

Resolution process

When I encounter a problem, I habitually open chatptthe software claudein my hand and ask questions above, but the answer I give is not satisfactory:
Question:
For the vue project, there is a directory on the server. How do I access the directory through the domain name? Files
Answer:
To access files in the Vue project through domain names, the following configuration is required:

1. Create the vue.config.js file in the root directory of the Vue project and add the publicPath configuration:

module.exports = {
    
    
  publicPath: '/文件目录名称/' 
}

For example, if the file directory name is myfiles, then the configuration is:

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

2. Copy the file directory myfiles to a location on the server at the same level as the Vue project.
3. Configure the access path for this directory on the server. For example, configure the following location in Nginx:

location /myfiles/ {
  alias /path/to/myfiles/;  # 指向实际目录位置 
}

4. Restart the server for the configuration to take effect.
5. In the Vue project, you can access these files through the relative path of the /myfiles/ file.
   For example, the file directory structure:

• Vue project
  • view.config.js
  • public
    • index.html
• myfiles
  • file.txt
• nginx.conf

vue.config.js:

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

nginx.conf:

location /myfiles/ {
    
    
  alias /path/to/myfiles/;  
}

Then you can access the file.txt file in the myfiles directory through /myfiles/file.txt in the Vue project.
This is because:

1. publicPath in vue.config.js tells Vue to resolve static resource paths starting with /myfiles/
2. nginx maps /myfiles/ to the actual file directory, so requesting /myfiles/file.txt will access the real file.txt file
3. The path of static files starting with publicPath in the Vue project is processed by webpack and deployed to the corresponding location.
   So through this configuration, we can access files in any directory on the server through domain names. Hope this helps you access external resources in your Vue project!
   

---

We can see that claudeit seems that I want to access the resources of the vue project on the server, not the files in other directories, so this answer will definitely not work.

So I did some research on my own.

Solution

Now it seems that the solution is very simple. You only need to nginxconfigure it inside. The configuration information is as follows:

  location /video/ {
            alias  /life/chx/;
        }

Below /life/chx/the file are the pictures and videos we uploaded.

Just take a look?

In this 信息爆炸day and age, it's not easy to pick out what's truly worth paying attention to every day 新闻事件. 雄雄的小课堂The official account is dedicated to screening the most important daily news events for you and providing you with the most essential news content. Every morning, 雄雄的小课堂about 40 hot news items will be pushed, covering politics, economy, society, entertainment, sports and other fields, allowing you to quickly grasp the most noteworthy events throughout the day.

雄雄的小课堂Following the principle of "freshness and practicality", we do not publish unnecessary gossip and strange stories, but only provide readers with the most authentic and reliable news reports. Concise news descriptions coupled with keyword annotations allow you to easily obtain the core elements of the news. At the same time, news pictures and sources are provided to ensure the authority and credibility of the news.

There is a lot of information but no time to read it carefully? The small classroom will intelligently select the most essential news collections for you. The news is broad and not scattered, 雄雄的小课堂giving you choices. If you are eager to grasp the hottest news as soon as possible every day, 雄雄的小课堂the official account will be your best choice.