Vue 项目部署遇到的问题

我会带着你远行 2022-03-22 09:08 345阅读 0赞

## 1.页面url中`#`号处理 ##

使用 vue-cli 生成的项目模板，运行时在url地址栏多一个\#号，服务器部署后会出现 [www.xxx.com/\#/][www.xxx.com] 的情况.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTU4NTk4_size_16_color_FFFFFF_t_70]

#### 解决方案: ####

修改 `src/router/index.js` 文件，vue-router 默认 hash 模式 ,我们可以修改 vue-router 模式为 `history` ，设置 `base` url效果正常了

const router = new VueRouter({ 
      mode: 'history',
      base: '/',
      routes: [...]
    })

更多的关于路由问题查看 vue-router 官网：[https://router.vuejs.org/zh-cn/essentials/history-mode.html][https_router.vuejs.org_zh-cn_essentials_history-mode.html]

## 2.服务器部署 vue 子模块项目 ##

有一个项目地址为 [www.xxx.com][www.xxx.com 1] ，这个项目下又添加了一个子模块，子模块是单独的一个项目，域名效果变成 [www.xxx.com/demo][www.xxx.com_demo] 的形式访问子模块项目的首页，通过 [www.xxx.com/demo/home][www.xxx.com_demo_home] 的方式访问子模块项目路由页面,也可以解决一个服务器部署多个项目.

#### 解决方案: ####

第一步：修改 `src/router/index.js` 文件中 `router` 的 `base` 配置，效果如下

Vue.use(Router)
    
    export default new Router({ 
      mode: 'history',
      base: '/demo',
      routes: [
        { 
          path: '/',
          name: 'home',
          component: home
        }
      ]
    })

第二步：修改 `npm run build` 命令打包生成的目录结构。打开前端项目根目录下 `/config/index.js` 文件,打包的默认路径为生成 `dist` 静态文件目录，默认路径配置如下

...
      build: { 
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
    ...

修改打包路径配置，静态文件目录下添加一个 demo 子目录，其他打包文件放到 demo 目录下，注意目录中的 / ， 前端项目中的配置完成了

...
      build: { 
        index: path.resolve(__dirname, '../dist/demo/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist/demo'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/demo/',
    ...

第三步：修改 `dev` 属性下的 `assetsPublicPath` 路径配置，由原来的`/`修改为`/demo/`

...
      dev: { 
        assetsSubDirectory: 'static',
        assetsPublicPath: '/demo/',
        proxyTable: { },
        host: 'localhost',
        port: 8080, 
        autoOpenBrowser: false,
    ...

dev 属性下的 assetsPublicPath: ‘/’, 属性问题，根据实际情况调整

第四步：修改服务器 nginx 的配置，设置 demo 路径访问内容，配置如下

server { 
            listen 80;
            server_name example.com;
            location /  { 
                root /xx/xx/xx/xx/dist;
            }
            location /demo  { 
                alias  /xx/xx/xx/xx/dist/demo;
            }
        }

root 和 alias 区别自行百度

[www.xxx.com]: http://www.xxx.com/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTU4NTk4_size_16_color_FFFFFF_t_70]: /images/20220322/cad70b2274964acbbb58d9425d2b98f8.png
[https_router.vuejs.org_zh-cn_essentials_history-mode.html]: https://router.vuejs.org/zh-cn/essentials/history-mode.html
[www.xxx.com 1]: http://www.xxx.com
[www.xxx.com_demo]: http://www.xxx.com/demo
[www.xxx.com_demo_home]: http://www.xxx.com/demo/home