vue2 浏览器地址添加项目名

修改配置文件（核心步骤）

在 Vue2 项目中，为浏览器地址添加项目名（即设置基础路径），需要通过修改配置文件来实现。这样访问项目时，URL 会显示为 http://域名/项目名/... 的形式。以下是具体步骤：

 

如果是 Vue CLI 3 及以上版本，在项目根目录创建或修改 vue.config.js：

// vue.config.js
module.exports = {
  // 配置基础路径（项目名）根据环境指定路径process.env.NODE_ENV === "production" ? "/myProject/" : "/",
 
  publicPath: '/你的项目名/' // 例如：'/dashboard/'  !!!!!!!!

// 其他配置...
};

注意：publicPath 的值必须以 / 开头和结尾（如 /project/），否则可能导致静态资源路径错误

修改路由配置（如果使用 Vue Router）

如果项目使用了 Vue Router，需要在路由实例中添加 base 配置，与上述路径保持一致

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home';

Vue.use(Router);

export default new Router({
  mode: 'history', // 通常配合 history 模式使用
  base: '/你的项目名/', // 必须与 publicPath 一致   !!!!
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
    // 其他路由...
  ]
});

 

示例效果假设设置项目名为 myProject

：

 

• 配置后，访问项目首页的 URL 会变为：http://localhost:8080/myProject/
• 访问路由为 /user 的页面时，URL 为：http://localhost:8080/myProject/user

 

部署注意事项

1. 开发环境：配置后重启开发服务器（npm run dev）即可生效。
2. 生产环境：
   • 构建项目时（npm run build），静态资源路径会自动加上项目名。
   • 部署到服务器时，需要将打包后的文件放在服务器对应项目名的目录下（例如 Nginx 的 myProject 目录）

 

 

以下也很重要：

当 process.env.NODE_ENV === "production" ? "/myProject/" : "/"   myProject 会在构建项目时在 资源引用添加 “/myProject/”

需要再指定部署服务器添加 项目目录 myProject

 

 

 

Nginx 配置示例（配合 history 模式

server {
  listen 80;
  server_name 你的域名;


  location /myProject/ {
    root /usr/share/nginx/html;  #存放项目目录
    index index.html;   #默认首页
    try_files $uri $uri/ /myProject/index.html; # 关键：解决刷新404问题
  }
}

 

 

# 处理静态资源（JS、CSS、图片等）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 30d;  # 静态资源缓存 30 天（利用浏览器缓存，减少请求）
        add_header Cache-Control "public, max-age=2592000";  # 缓存控制
    }

 

 

通过以上配置，即可在浏览器地址中添加项目名，适用于需要在同一域名下部署多个项目的场景，避免路由冲突。核心是确保 publicPath（基础路径）和路由 base 保持一致。