Vue 项目部署遇到的问题

1.页面url中#号处理

使用 vue-cli 生成的项目模板，运行时在url地址栏多一个#号，服务器部署后会出现 www.xxx.com/#/ 的情况.

解决方案:

修改 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

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

有一个项目地址为 www.xxx.com ，这个项目下又添加了一个子模块，子模块是单独的一个项目，域名效果变成 www.xxx.com/demo 的形式访问子模块项目的首页，通过 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 区别自行百度