uni-app关于在cli下js文件引入问题

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

uni-app关于在cli下js文件引入问题

image

这个能否统一下呢?

现在情况是我建了两个项目

a项目是正式开发的

b项目作为库来写的,算是公用项目

但是b项目下引用一个config.js文件.这个必须是当前正在开发的项目中的js,不能是库项目的文件

在hbx下是没问题,结果换到cli下,问题就来了. 库里就提供找不到config.js

不知道这个是否能统一下让@指向当前的项目目录?和hux一样


Harmonyos Next教程
1 回复

在uni-app中使用CLI（命令行界面）进行开发时，引入JavaScript文件是一个常见的需求。uni-app本身基于Vue.js，因此在引入和管理JavaScript文件时，可以充分利用Vue.js和Webpack的特性。以下是一些在uni-app CLI项目中引入JavaScript文件的方法和代码示例。

1. 在单文件组件（.vue文件）中引入JavaScript文件

你可以在<script>标签内使用import语句来引入JavaScript文件。假设你有一个名为utils.js的工具文件，内容如下：

// utils.js
export function sayHello(name) {
  return `Hello, ${name}!`;
}

在你的Vue组件中引入并使用它：

<template>
  <view>{{ message }}</view>
</template>

<script>
import { sayHello } from '@/common/utils.js'; // 假设utils.js在src/common目录下

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.message = sayHello('uni-app');
  }
};
</script>

2. 在main.js中全局引入JavaScript文件

如果你想在整个应用中都能使用某个JavaScript文件的功能，可以在main.js中引入它。例如：

// main.js
import Vue from 'vue';
import App from './App';
import { sayHello } from '@/common/utils.js'; // 全局引入utils.js

Vue.prototype.$sayHello = sayHello; // 将方法挂载到Vue原型上，以便在组件中通过this.$sayHello调用

Vue.config.productionTip = false;

App.mpType = 'app';

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

然后在任何组件中，你都可以通过this.$sayHello('name')来调用这个方法。

3. 使用Webpack的alias配置

在vue.config.js（uni-app CLI项目通常会生成这个文件）中，你可以配置Webpack的alias，以便更方便地引入文件：

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

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
};

这样，你就可以使用@符号来代表src目录，从而简化文件路径。

通过上述方法，你可以在uni-app CLI项目中灵活地引入和管理JavaScript文件。这些方法不仅适用于普通的JavaScript文件，也适用于Vuex store、Vue Router配置文件等。

回到顶部