vuecli3打包部署 非根目录下 配置vue.config.js publicPath

从 Vue CLI 33 起已弃用baseUrl，请使用publicPath。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 >查询了好多资料，都没有找到可以直接应用的，综合了好多，配置runner之后，前端项目里面需要在项目根目录配置三个文件：

1gitlab-ciyml 文件

stages:

- build

- deploy

# 设置缓存

cache:

paths:

- node_modules/

- dist/

# 安装依赖 before_script 会在每个 stages 执行之前运行

before_script:

- npm install

# 编译 这里对应上方 stages ，

build:

stage: build

script:# script 为要执行的命令，可以多条按顺序执行

    - npm run build:prod

docker-deploy:

stage: deploy

# 执行Job内容

  script:

# 通过Dockerfile生成pactera_pflife_ui镜像

    - sudo docker build -t pactera_pflife_ui

# 删除已经在运行的容器

    - if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi

# 通过镜像启动容器

    - sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui

tags:

# 执行Job的服务器

    - pflife-web

only:

# 只有在master分支才会执行

    - dev_xht

2Dockerfile 文件
# 设置基础镜像

FROM nginx:latest

# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面

COPY dist/ /usr/share/nginx/html

# 用本地的 defaultconf 配置来替换nginx镜像里的默认配置

COPY defaultconf/etc/nginx/confd/defaultconf

EXPOSE 80

CMD ["nginx","-g","daemon off;"]

3defaultconf文件

server {

listen      80;

server_name  3910096; # localhost修改为docker服务宿主机的ip

location / {

root  /usr/share/nginx/html;

index  indexhtml indexhtm;

try_files $uri $uri/ /indexhtml =404;

}

location /api/{

proxy_set_header Host $>小鸟云服务器niaoyun实例创建好之后，您可以使用以下任意一种方式登录服务器：
远程桌面连接(MicrosoftTerminalServicesClient,MSTSC)：采用这种方式登录，请确保实例能访问公网。如果在创建实例时没有购买带宽，则不能使用远程桌面连接。
管理终端VNC：无论您在创建实例时是否购买了带宽，只要您本地有网页浏览器，都可以通过管理控制台的管理终端登录实例。
使用远程桌面连接(MSTSC)登录实例
打开开始菜单>远程桌面连接，或在开始菜单>搜索中输入mstsc。也可以使用快捷键Win+R来启动运行窗口，输入mstsc后回车启动远程桌面连接。
在远程桌面连接对话框中，输入实例的公网IP地址。单击显示选项。
输入用户名，如小鸟云默认为niaoyun。单击允许我保存凭据，然后单击连接。这样以后登录就不需要手动输入密码了。

最好是安装一个。
1如果你仅仅是打包好的vue相机，那么要看服务端使用的是什么语言，如果是node的话，肯定要安装node环境的，但是如果不是node，那么就没有必要了。
2如果你想在服务端跑vue的项目，也就是在远程端做开发工作，那么肯定是要安装node的，毕竟vue开发环境需要node。
基本上服务端也就这两种需求，node包其实很小，安装一个也不费事，还可以方便开发，我觉得在远程端按一个最好。

我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢？ Vue 项目启动过程，本文简要介绍。

在执行 npm run dev 的时候，会在当前目录中寻找 packagejson 文件，包含项目的 名称版本 、 项目依赖 等相关信息。

从下图中可以看到， 启动 npm run dev 命令后，会加载 build/webpackdevconfjs 配置并启动 webpack-dev-server 。

webpackdevconfjs 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。

可以看到，在 indexjs 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是 8080 ，这里可以进行修改。

indexhtml 的内容很简单，主要是提供一个 div 给 vue 挂载。

mainjs 中， 引入了 vue 、 App 和 router 模块， 创建了一个 Vue 对象，并把 Appvue 模板的内容挂载到 indexhtml 的 id 为 app 的 div 标签下， 并绑定了一个路由配置。

上面 mainjs 把 Appvue 模板的内容，放置在了 indexhtml 的 div 标签下面。查看 Appvue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view ， router-view 的内容将由 router 配置决定。

查看 route 目录下的 indexjs ，我们发现这里配置了一个路由， 在访问路径 / 的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view 中。

HelloWorld 中主要是一些 Vue 介绍显示内容。

所以，页面关系组成是 indexhtml 包含 Appvue，Appvue 包含 HelloWorldvue 。

到这，我们开始安装 router 、 vuex 。
Ctrl+C 退出启动，继续执行 vue-cli ，脚手架安装插件 router 和 vuex 开始。

输入一个大写Y，按下Enter

vuex 是专门为 Vuejs 设计的状态管理库，以利用 Vuejs 的细粒度数据响应机制来进行高效的状态更新。

Vuex 主要有五部分：

① 安装 vuex

接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 storejs 文件
文件夹目录 长得是这个样子

在保证我们处于我们项目下，在命令行输入下面命令，然后，安装 vuex 。

② vuex 的关系图

③ 开始使用，在 mianjs 中，引入 vuex

④然后告知 vue 开始使用 vuex (Vueuse(Vuex))
在 storejs 文件中，引入 vuex 并且使用 vuex ，这里注意我的变量名是大写 Vue 和 Vuex

⑤接下来，在mainjs中引入store

到这里算是，以及完成了。

我们再重新看一下此时的项目结构，多了routerjs和storejs，其它相关的文件也被修改

您好，关于您的问题，Vue部署到Nodejs还是Nginx，这个问题的答案取决于您的项目需求。Nodejs是一个JavaScript运行环境，可以用来构建高性能的Web应用程序，而Nginx是一种静态服务器，可以用来处理静态文件，如HTML、CSS和JavaScript文件。如果您的项目需要高性能的Web应用程序，则可以使用Nodejs；如果您的项目需要处理大量静态文件，则可以使用Nginx。因此，您需要根据您的项目需求来决定使用Nodejs还是Nginx。

一本地环境调试请求跨域问题

1配置代理域名:

config/indexjs
2npm run dev 打包  生成 dist 目录  >