vue加不加引号的区别

img

img


今天学vue看到这里有点迷，咋base和active不加引号，下面那个则需要加呢

base和active加不加都可以，但是要注意，text-danger必须加，因为它中间包含“-”，不是合法的token，不加无法和减号运算符区分。

  • 这篇博客: 一个域名部署多个vue项目的方法中的 4.通过 base 解决问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 通过设置 base 选项，可以解决上面问题

    首先，创建路由对象时，加上base 选项

    在这里插入图片描述

    另外一个项目，也进行配置

    在这里插入图片描述

    但是，光这样是不行的，这样只能保证，在地址栏后面自动加入 toutiao 或则 douyin 这种路径，但是 index.html 中引入的 js 等资源文件还是与原来一样，如何在打包的时候，自动为资源引用地址中加入 toutiao 或者 douyin 这些路径呢？这就需要进行 webpack 配置。在vue.config.js 中，加入如下配置

    const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置打包时资源引用的的前置路径
  publicPath: process.env.NODE_ENV === 'production'
    ? '/toutiao/'
    : '/'
})
​

    此时，我们再重新打包 npm run build，再次将打包后的 dist 目录改名为 toutiao 或者 douyin 拷贝到 unittest 目录下，然后地址栏中输入跟上面一样的地址

    在这里插入图片描述

    我们发现，对于 js 等资源文件的引用，路径就对了

    总结：路由中的 base 选项与 publicPath 选项配合，就可以做到部署项目时，一个域名映射多个前端 SPA 项目