Vue:Mac下Cli 3.x环境搭建与vue基本配置及部署

Vue环境搭建

一、安装

1.安装node

• brew安装

brew install nodejs

安装完成，查看node.js版本

node -v

• 设置nodejs模块安装目录访问权限

chmod -R 777 /usr/local/lib/node_modules/

2.安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装webpack

cnpm install webpack -g

4.安装vue-cli 3.x

cnpm install -g @vue/cli

安装完成，vue --version查看是否安装

➜  ~ vue --version
3.7.0
➜  ~

二、创建应用

1.创建

vue create project-name

• 创建时的所有配置
  

2.完成

• 开发启动

npm run serve

• 打包

npm run build

三、常见配置

1.关闭eslint语法检测

• 如果是选择配置保存到package.json文件的，可在文件中找到配置

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

关闭语法检测，删除掉"@vue/standard"配置即可

2.手动增加vue.config.js文件

vue cli 3.x后，vue.config.js是一个可选文件，默认没有自动创建，可以手动在项目根目录下创建，它会被@vue/cli-service 自动加载。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/home/webappdemo/' : '/',
  assetsDir: 'static',
  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': [
          './src/theme'
        ]
      }
    }
  },
  pluginOptions: {
    'cube-ui': {
      postCompile: true,
      theme: true
    }
  }
}

四、项目部署

1.项目history路由模式在Nginx部署

开发完成后，在测试或生产环境部署。vue项目打包后，可用nginx部署到服务器

• 上传项目

上传项目(webappdemo)到服务器的任意位置(/home/webappdemo/)

• Nginx配置

vue项目的路由模式如果是history，需要nginx正确配置才能正常提供服务与刷新子界面不会变空白。配置示例如下：

server {
	listen      80 ;
	server_name  demo.example.com;
  
	# webapp conf
	location /webappdemo {
		alias /home/webappdemo/;
		index index.html;
		try_files $uri $uri/ /webappdemo/index.html;
	}
}

2.项目history路由模式在Tomcat部署

开发完，测试或生产环境部署。vue项目打包后，可用tomcat部署到服务器

• 上传项目

上传项目(webappdemo)到tomcat的webapps目录下

• 修改sever.xml文件

修改conf下的server.xml文件，在 标签下增加静态资源路由配置

<Context path="/home/webappdemo" docBase="webappdemo" reloadable="false" />

ps: path保持与项目中vue.config.js中publicPath配置一致，docBase为web应用和本地路径

<Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <!-- SingleSignOn valve, share authentication between web applications
             Documentation at: /docs/config/valve.html -->
        <!--
        <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
        -->

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
          <Context path="/home/webappdemo" docBase="webappdemo" reloadable="false" />
      </Host>

• 新增web.xml文件

vue项目的路由模式如果是history，需要服务器配置下才能正常提供服务与刷新子界面不会变空白。在tomcat下部署如下：

在项目(webappdemo)根目录下创建文件夹WEB-INF,并在WEB-INF文件夹下创建web.xml文件，最终项目结构

.
├── WEB-INF
│   └── web.xml
├── favicon.ico
├── index.html
└── static
    ├── css
    │   ├── app.02c1b975.css
    │   ├── chunk-0d2d9a7c.fbdf4dec.css
    │   ├── chunk-1c7a44c4.55c0d3fd.css
    │   ├── chunk-2a642b84.a37cd815.css
    │   ├── chunk-732d40b2.e47e46f6.css
    │   ├── chunk-77e673e4.b3f885d7.css
    │   ├── chunk-787d872e.18979082.css
    │   ├── chunk-7aedd8fe.ba791828.css
    │   ├── chunk-8d332df8.c53d345f.css
    │   ├── chunk-c04d76a0.c7026f15.css
    │   ├── chunk-eb55fb2c.b3f885d7.css
    │   ├── chunk-elementUI.061a2b0a.css
    │   └── chunk-libs.3dfb7769.css
    ├── fonts
    │   ├── element-icons.535877f5.woff
    │   └── element-icons.732389de.ttf
    ├── img
    │   ├── 404.a57b6f31.png
    │   ├── 404_cloud.0f4bc32b.png
    │   ├── img-user-profile.e8ed41d1.png
    │   └── logo.e4b5e3c7.png
    └── js
        ├── app.1c35bfcb.js
        ├── chunk-0d2d9a7c.b4720ba3.js
        ├── chunk-1c7a44c4.e12a85fb.js
        ├── chunk-2a642b84.617be68f.js
        ├── chunk-732d40b2.d9d4b8b1.js
        ├── chunk-77e673e4.344ea121.js
        ├── chunk-787d872e.4895e4cc.js
        ├── chunk-7aedd8fe.fcafa663.js
        ├── chunk-8d332df8.3bd396d8.js
        ├── chunk-c04d76a0.c18ffa88.js
        ├── chunk-eb55fb2c.351ee754.js
        ├── chunk-elementUI.3eefdd04.js
        └── chunk-libs.eba70c64.js

WEB-INF/web.xml文件配置内容(解决history路由去除#号的核心配置)：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0"
         metadata-complete="true">

  <display-name>webappdemo</display-name>
  <description>
     webappdemo route
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/index.html</location>  
</error-page>  
</web-app>

五、常见问题

1.打包后浏览器还能看到源码 webpack://

• 问题

webpack://，展开能看到源码

• 解决

vue.config.js配置 productionSourceMap:false

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/home/webappdemo/' : '/',
  assetsDir: 'static',
  productionSourceMap: false, // 打包后生产环境 source map
  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': [
          './src/theme'
        ]
      }
    }
  },
  pluginOptions: {
    'cube-ui': {
      postCompile: true,
      theme: true
    }
  }
}

2.设置proxy解决开发跨域问题

• 问题

开发时，浏览器同源策略跨域问题

• 解决

vue.config.js配置 devServer

devServer: {
    proxy: {
      "/apicros": {
        target: "http://171.168.1.33:8088", // 跨域访问域名或ip
        ws: true,
        changOrigin: true,
        secure: false,
          pathRewrite: {
          '^/apicros': '/'
        }
      }
    }
  }

设置 axios请求baseURL：http://localhost:8080/apicros