前端开发必备技能知识笔记-二级目录的配置

说明

在同一个域名下部署多个项目的情况，我们就需要配置使用二级目录。

二级目录，就是子目录，继承在主站目录下的，相当于在网站的根目录下再建立一个文件夹存放网站。

例如：

• http://192.168.1.201/mr-resource-viewer
• http://192.168.1.201/mr-miningright-viewer
• http://192.168.1.201/mr-miningrules-viewer
  这三个地址，域名都是一样的（http://192.168.1.201），只是后面的二级目录不一样（mr-resource-viewer、mr-miningright-viewer、mr-miningrules-viewer），它们指向的就是不同的项目。

配置步骤

1、配置.ENV文件

//.env.production文件中添加VUE_APP_SRC参数作为二级目录的名称

NODE_ENV=production
VUE_APP_API_URL = 'http://192.168.1.201/mr-cas-api/'
VUE_APP_SRC = '/mr-resource-viewer/'

全局使用process.env.VUE_APP_SRC 取用这个二级目录名称

2、路由配置

const router = new VueRouter({
  mode: 'history',
  base:process.env.NODE_ENV === 'production' ? process.env.VUE_APP_SRC : '/',
  routes
})

vue-router的两种前端基本访问模式hash和history。hash模式后面带#，打包的时候只需要把绝对路径(/)换成相对对路径（./），就可以部署在任何地方，不需要服务器配合，但是不好看，所以我们一般选择history模式，但是history模式需要配合服务器的部署。

3、配置vue.config.js配置文件

module.exports = {
　　publicPath:process.env.NODE_ENV === 'production' ? process.env.VUE_APP_SRC : '/',
}

注意：有些教程里面会让我们到config文件夹下的index.js中修改 assetsPublicPath，但是在项目里面会找不到这个参数，原因就是脚手架的版本问题。如果使用vue-cli 4.x版本创建的项目，就要到vue.config.js 文件中 ，修改 publicPath的值，如上所示。

4、html标签中静态文件路径的处理

如果只是配置上面的配置的话，你会发现静态文件会找不到，比如图片不出现这种情况，所以我们还要做一些处理，对静态文件路径进行二级目录的拼接。

比如对于img标签的处理，可以添加一个全局的vue过滤器

Vue.filter('bgImgBasePath', (val) => {
    const base = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_SRC : '/';
    if (val && val.length > 0 && val[0] == '/') {
        val = val.substr(1);
    }

    const ret = {
        backgroundImage: `url(${base}${val})`,
    };
    return ret;
});

使用

5、css中静态资源文件路径的处理

在app.vue中添加全局的less参数（assetsPathName）

在vue.config.js文件中添加以下配置，项目初始化的时候赋值@assetsPathName参数

添加一个less的函数

.formatAssetsPath(@filePath:'""',@name:background-image,@assetsPathName:@assetsPathName) {
    @{name}: ~ 'url("@{assetsPathName}@{filePath}")';
}

这样样式里面就会拼接好有二级目录的路径了