uni-app希望可以新增编译注入

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app希望可以新增编译注入

  1. 需要uni-app编译h5模式
  2. publicPath 为远程cdn地址
  3. router.mode = history
  4. 需要设置router.base = 常量
  5. 因为某个也许需求假设我的nginx重写 希望动态设置 router.base
  6. 最后期望index.html里新增的创建之前的方法如下
 uni.ready(function(){    
    window.__uniConfig.router.base = '/shop777/'  //注入base  
 })
信息类型 信息
开发环境 uni-app
版本号 未提及
项目创建方式 未提及

Harmonyos Next教程
2 回复

最好的结局的整个H5 配置都可以在html文件里配置。


在uni-app中，你可以通过自定义编译脚本的方式实现编译注入。这通常用于在构建过程中动态地修改代码、配置或者资源文件。以下是一个示例，展示了如何在uni-app项目中新增编译注入功能。

步骤一：配置vue.config.js

首先，确保你的uni-app项目根目录下有一个vue.config.js文件。如果没有，可以创建一个。这个文件是Vue CLI的配置文件，uni-app也支持使用它来进行一些自定义配置。

// vue.config.js
const path = require('path');

module.exports = {
  chainWebpack: config => {
    // 自定义一个Webpack插件用于编译注入
    config.plugin('compile-inject').tap(args => {
      // 这里可以定义你要注入的内容，比如一个环境变量
      const injectContent = `
        module.exports = {
          injectedVar: 'This is an injected variable'
        };
      `;

      // 将内容写入一个临时文件
      const tempFilePath = path.resolve(__dirname, 'temp', 'inject.js');
      require('fs').writeFileSync(tempFilePath, injectContent, 'utf8');

      // 在编译过程中引入这个临时文件
      args.push({
        filename: tempFilePath,
      });
      return args;
    });
  },
};

步骤二：创建临时文件目录

在项目的根目录下创建一个temp目录，用于存放编译注入过程中生成的临时文件。

mkdir temp

步骤三：在代码中引入注入的内容

现在，你可以在uni-app项目的任意地方引入并使用这个注入的内容。例如，在main.js中：

// main.js
import Vue from 'vue';
import App from './App';

// 引入注入的内容
import injectedConfig from '../temp/inject';

console.log(injectedConfig.injectedVar); // 输出: This is an injected variable

Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
    ...App
});
app.$mount();

注意事项

  1. 清理临时文件：在实际开发中，你可能需要在构建完成后清理这些临时文件，以避免污染项目目录。这可以通过在vue.config.js中添加一个清理插件来实现。
  2. 安全性：确保注入的内容是安全的，避免引入潜在的代码注入攻击。
  3. 兼容性：上述示例基于Vue CLI的配置方式，确保你的uni-app项目兼容Vue CLI的配置。如果不兼容，你可能需要调整配置方式。

通过上述步骤，你可以在uni-app项目中实现编译注入功能，从而在构建过程中动态地修改或添加代码。

回到顶部