vue中高德地图资源引入index.html中,打包部署不了

1、检查高德地图的引入方式：确保在Vue项目中正确引入了高德地图的资源文件。

2、检查高德地图的API密钥：在引入高德地图资源之前，你需要获取高德地图的API密钥。确保在indexhtml文件中正确设置了高德地图的API密钥。

3、检查高德地图的版本：确保引入的高德地图库或SDK的版本与你的Vue项目兼容。

4、检查构建配置：在Vue项目中，你需要确保构建配置正确无误。检查Vue项目的构建配置文件（例如vueconfigjs），确保没有禁用或限制引入高德地图资源的配置。

5、检查网络连接：在打包和部署到生产环境之前，确保你的服务器具有正确的网络权限，以便可以访问到高德地图的资源文件。

在BOA服务器上部署Vue是可行的，只要服务器满足Vue应用程序的运行要求即可。

下面是一些在BOA服务器上部署Vue应用程序的基本步骤：

1 确保你的BOA服务器上已经安装了Nodejs和npm。你可以使用以下命令验证安装：

```bash

node --version

npm --version

```

如果它们没有显示版本号，则需要先安装Nodejs和npm。

2 在本地构建Vue应用程序。在命令行中进入你的Vue项目根目录，并运行以下命令：

```bash

npm run build

```

这将在项目的`dist`目录中生成用于生产环境的构建文件。

3 将构建文件上传到BOA服务器中。使用FTP或其他文件传输工具将构建文件复制到BOA服务器的合适目录中。

4 配置BOA服务器以正确地托管Vue应用程序。具体的配置方法可能因服务器和配置而异。一种常见的方法是配置BOA服务器的虚拟主机，并将网站的根目录指向Vue应用程序的构建文件所在的目录。

5 重启BOA服务器使配置生效。

6 测试访问Vue应用程序。在浏览器中输入你的服务器的域名或IP地址，应该能够访问到部署的Vue应用程序。

请注意，在部署Vue应用程序时，你还需要考虑服务器的安全性、域名配置、SSL证书等其他设置。确保你的服务器和应用程序的配置符合你的需求和最佳实践，并依据需要进行相应的调整。

写在前面：

如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数，这两个设置不太难，而且有一些共通之处，可能有一些朋友对此不太了解，所以随便写出来分享一波。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。

定义全局变量

原理：

设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在mainjs里面使用Vueprototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。

全局变量模块文件：

Globalvue文件：

<script>

const serverSrc='wwwbaiducom';

const token='12345678';

const hasEnter=false;

const userSite="中国钓鱼岛";

export default

{

userSite,//用户地址

token,//用户token身份

serverSrc,//服务器地址

hasEnter,//用户登录状态

}

</script>

使用方式1：

在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。

在text1vue组件中使用：

<template>

<div>{{ token }}</div>

</template>

<script>

import global_ from '//components/Global'//引用模块进来

export default {

name: 'text',

data () {

return {

token:global_token,//将全局变量赋值到data里面，也可以直接使用global_token

}

}

}

</script>

<style lang="scss" scoped>

</style>

使用方式2：

在程序入口的mainjs文件里面，将上面那个Globalvue文件挂载到Vueprototype。

import global_ from '/components/Global'//引用文件

VueprototypeGLOBAL = global_//挂载到Vue实例上面

接着在整个项目中不需要再通过引用Globalvue模块文件，直接通过this就可以直接访问Global文件里面定义的全局变量。

text2vue：

<template>

<div>{{ token }}</div>

</template>

<script>

export default {

name: 'text',

data () {

return {

token:thisGLOBALtoken,//直接通过this访问全局变量。

}

}

}

</script>

<style lang="scss" scoped>

</style>

Vuex也可以设置全局变量：

通过vuex来存放全局变量，这里东西比较多，也相对复杂一些，有兴趣的小伙伴们，可自行查阅资料，折腾一波、

定义全局函数

原理

新建一个模块文件，然后在mainjs里面通过Vueprototype将函数挂载到Vue实例上面，通过this函数名，来运行函数。

1 在mainjs里面直接写函数

简单的函数可以直接在mainjs里面直接写

VueprototypechangeData = function (){//changeData是函数名

alert('执行成功');

}

组件中调用：

thischangeData();//直接通过this运行函数

2 写一个模块文件，挂载到mainjs上面。

basejs文件，文件位置可以放在跟mainjs同一级，方便引用

exportsinstall = function (Vue, options) {

Vueprototypetext1 = function (){//全局函数1

alert('执行成功1');

};

Vueprototypetext2 = function (){//全局函数2

alert('执行成功2');

};

};

mainjs入口文件：

import base from '/base'//引用

Vueuse(base);//将全局函数当做插件来进行注册

组件里面调用：

thistext1();

thistext2();

后话

上面就是如何定义全局变量 全局函数的内容了，这里的全局变量全局函数可以不局限于vue项目，vue-cli是用了webpack做模块化，其他模块化开发，定义全局变量、函数的套路基本上是差不多。上文只是对全局变量，全局函数的希望看完本文能给大家一点帮助。

1、vite-plugin-vue-setup-extend

解决vue3下 script setup语法糖 下 ，手动设置组件name不方便的问题

npm i vite-plugin-vue-setup-extend -D

在文件viteconfigts中

importsetupExtendfrom'vite-plugin-vue-setup-extend';exportdefaultdefineConfig({plugins:[setupExtend()],});

2、unplugin-auto-import

实现vue函数的自动导入,这样如ref, computed，watch等就不用手动导入了

npm i unplugin-auto-import-D

在文件viteconfigts中

importAutoImportfrom'unplugin-auto-import/vite';exportdefaultdefineConfig({plugins:[AutoImport({imports:['vue','vue-router',{vuex:['useStore']}],resolvers:[],dts:false}),],});

当前无效与eslint冲突，如果直接使用依然会报错

这里采用了全局eslint还需安装 npm i eslint-plugin-auto-import  -D

顾最终配置如下

在viteconfigts文件中

exportdefault({mode})=>{returndefineConfig({plugins:[AutoImport({include:[/\[tj]sx$/,// ts, tsx, js, jsx/\vue$/,/\vue\vue/,// vue/\md$/// md],imports:['vue','vue-router',{vuex:['useStore']}],resolvers:[ElementPlusResolver()],dts:'/auto-importsdts',// eslint报错解决eslintrc:{// 此处为true运行后会生成eslintrc-auto-importjson  auto-importsdts文件enabled:true,// 此处第一次运行使用true,之后改为falsefilepath:'/eslintrc-auto-importjson',// Default `/eslintrc-auto-importjson`globalsPropValue:true// Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')}}),Components({resolvers:[ElementPlusResolver()]}),],});};

在eslintrcjs文件中

extends:['/eslintrc-auto-importjson'],

在tsconfigjson文件中

compilerOptions: [        "types": ["element-plus/global"]  ],"include": [, "auto-importsdts"],

3、unplugin-vue-components

实现vue组件库的自动按需导入,这样就不用手动导入了

npm i unplugin-vue-components -D

在文件viteconfigts中

importAutoImportfrom'unplugin-auto-import/vite';importComponentsfrom'unplugin-vue-components/vite';import{ElementPlusResolver}from'unplugin-vue-components/resolvers';exportdefaultdefineConfig({plugins:[vue(),AutoImport({imports:['vue','vue-router',{vuex:['useStore']}],resolvers:[ElementPlusResolver()],dts:false}),Components({resolvers:[ElementPlusResolver()]}),]});

4、vite-plugin-compression

静态资源压缩

npm i vite-plugin-compression -D

在文件viteconfigts中

// 静态资源压缩importviteCompressionfrom'vite-plugin-compression';exportdefaultdefineConfig({plugins:[viteCompression({verbose:true,disable:false,// 不禁用压缩deleteOriginFile:false,// 压缩后是否删除原文件threshold:10240,// 压缩前最小文件大小algorithm:'gzip',// 压缩算法ext:'gz'// 文件类型})],});

5、rollup-plugin-visualizer

打包分析,可视化并分析构建包，查看哪些模块占用空间大小，以及模块的依赖关系

npm i rollup-plugin-visualizer -D

在文件viteconfigts中

importvisualizerfrom'rollup-plugin-visualizer';exportdefaultdefineConfig({plugins:[visualizer({// 打包后自动打开分析报告open:true})],});

链接：https://wwwjianshucom/p/d45ae4b5c11a

你的服务器是什么系统啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git   nginx  vue-cli

安装好nginx 用你的公网ip访问就可以看到 下面的页面

然后进入到下面的路径

vi default 你会看到nginx的默认配置

默认监听80端口 根路径

把你写好的vue项目 上传到github ，通过git clone 克隆到

服务器

路径下面

然后npm/yarn add/install 安装依赖 然后npm run build

vi 打开html 下面的 indexhtml 可以看到

nginx默认的html

进入sites-enabled 发现 它里面的 default 来自 sites-available的default

所以需要在 sites-available 新建一个文件 你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx -s reload

打开浏览器 公网ip:端口号  或者 域名访问

这就可以了

还有 用express 部署这个 简单些

vue在服务端部署时，我们都知道通过npm run build 指令打包好的dist文件，通过http指定是可以直接浏览的，Thinkphp通过域名指向indexphp文件才可以浏览。要使前端正常调用后端数据，有两种方法：1、前端跨域调用后端数据，2、前端打包文件部署在后端的服务器文件夹下（同域）。

web服务器： apache

一、跨域

在服务器配置站点：

在路径/home/www/  下创建test项目文件夹，用来放项目文件。  

找到httpd-vhostsconf文件配置站点  

前端站点：  

    ServerName testtestcom  

    DocumentRoot "/home/www/test/dist"    

    DirectoryIndex indexhtml  

后端站点：  

    ServerName testtestphpcom  

    DocumentRoot "/home/www/test/php"    

    DirectoryIndex indexphp  

将前端打包好的dist文件放在/home/www/test/ 文件夹下，运行http://testtestcom可浏览，当路径改变时，刷新会出现404错误。此时dist文件下创建一个htaccess文件，当路径不存在时，路径指向http://testtestcom/indexhtml能解决此问题。

  RewriteEngine On  

  RewriteBase /  

  RewriteRule ^index\html$ - [L]  

  RewriteCond %{REQUEST_FILENAME} !-f  

  RewriteCond %{REQUEST_FILENAME} !-d  

  RewriteRule  /indexhtml [L]  

在/home/www/test文件夹下创建项目根目录php文件夹，将thinkphp文件放在php下。TP5的入口文件在public文件下，在这将public下的入口文件indexphp挪到php文件夹下（个人习惯将入口文件放在项目根目录）, 后端绑定Index模块。

前端调用后端接口，存在跨域，跨域解决方法有好几种，在这我将在后端php做配置，解决跨域问题，在公用控制器设置跨域配置：

class Common extends Controller  

{  

    public $param;  

    // 设置跨域访问  

    public function _initialize()  

    {  

        parent::_initialize();  

        isset($_SERVER['HTTP_ORIGIN'])  header('Access-Control-Allow-Origin: '$_SERVER['HTTP_ORIGIN']) : '';  

        header('Access-Control-Allow-Credentials: true');  

        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');  

        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");  

$param =  Request::instance()->param();  

$this->param = $param;  

    }  

}  

前端调用登录接口： thisaxiospost('http://testtestphpcom/indexphp/base/login', {user: '', password: ''})。

(可在webpackbaseconfjs文件下可定义接口：http://testtestphpcom/indexphp/)

二、同域

后端配置同上，公共配置器中的header配置注释。将前端的dist文件下的所有文件（包含htaccess），放在php文件夹下。将后端index控制器的index方法的路径重定向php下的indexhtml文件：

namespace app\index\controller;  

use think\Controller;  

class Index extends Controller  

{  

    public function index() {  

$this->redirect('/indexhtml');  

    }  

}  

前端调用登录接口： thisaxiospost('/indexphp/base/login', {user: '', password: ''})

转自：https://blogcsdnnet/qq_35465132/article/details/78986675