-
Docker结合Jenkins部署vue项目
2021-01-20 11:58:59Vue官方说可以不通过ngin来部署,但是如果上生产环境,建议还是要走nginx 安装nginx 这里安装过程不再赘述,如果不清楚可以参考下面这篇文章 https://blog.csdn.net/qq_42815754/article/details/82980326 配置... -
php部署vue项目
2020-05-21 13:56:02其实不需要安装node环境 vue通过webpack打包的项目如下: 可以看到,只有一个dist文件,里面一个静态文件static,和一个入口文件 如果直接点击,什么都不显示:如下图 如果有php环境,这里以phpstudy为例,...前端vue写的项目,后端提供接口,打包过后不知道怎么运行
其实不需要安装node环境
vue通过webpack打包的项目如下:
可以看到,只有一个dist文件,里面一个静态文件static,和一个入口文件
如果直接点击,什么都不显示:如下图
如果有php环境,这里以phpstudy为例,只需解析域名到index.html即可
这样在运行刚设置的域名就行了,如下图
设置两个域名会有跨域问题,后端解决下就行了,不会自行百度
-
通过Vue CLI3 快速创建Vue项目并部署到tomcat
2020-07-20 23:58:12首先你要安装好nodejs和yarn,直接在官网下载安装包,一键安装即可,不需要什么环境配置,我安装的是最新版本(node-v10.13.0、yarn-1.12.3) 2、安装 同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3,而自己...1、前提
首先你要安装好nodejs和yarn,直接在官网下载安装包,一键安装即可,不需要什么环境配置,我安装的是最新版本(node-v10.13.0、yarn-1.12.3)2、安装
同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3,而自己学习的GitHub上的项目为2~
2.1 新版本 Vue CLI 3
写这篇文章的时候官网默认的为Vue CLI 3
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2.2 旧版本 Vue CLI 23、创建项目
Vue CLI 3:vue create hello-world
Vue CLI 2:
vue init webpack my-project
一直按回车为默认选项,手动设置请参考官方文档
4、运行项目
Vue CLI 3:
cd hello-world
yarn serve
Vue CLI 2:cd my-project/
npm run dev
5、验证在浏览器输入localhost:8080,看见下图图所示的效果即为成功
6、构建
yarn build
# OR
npm run build
会生成一个dist文件夹
7、部署7.1 本地预览
dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 baseUrl 配置为了一个相对的值),所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve安装serve:
npm install -g serve
启动:
serve -s dist
INFO: Accepting connections at http://localhost:5000预览:http://localhost:5000
7.2 部署到tomcat
默认的配置直接部署到tomcat,是有错误的(在浏览器检查里发现是找不到对应的静态文件,原因是路径不对),需要修改一下配置,版本2和版本3的配置也不一样Vue CLI 3:
在hello-world新建vue.config.js,并添加如下内容module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/hello-world/'
: '/'
}这里参考官方文档:https://cli.vuejs.org/zh/guide/deployment.html#platform-guides
Vue CLI 2:
找到my-project/config/index.js文件中build对应的assetsPublicPath键值,将其修改为assetsPublicPath: './',
这里参考:https://blog.csdn.net/Dear_Mr/article/details/72871919
重新build,将生成的dist文件夹复制到tomcat目录下的webapps文件夹下,可以将dist文件夹改名为hello-world,那么访问路径就为
ip/hello-world,也可以不改名那么访问路径就为ip/dist,效果查看vue.dongkelun.com/hello-world、vue.dongkelun.com/dist8、其他问题
8.1 npm run dev启动后,用Ctrl+c,关闭不了对应的进程
原因是在Git Bash Here里执行的命令,一种方法是在windows 的shell里执行命令(输入cmd进入),另一种办法是如果不想放弃git的命令行的话,每次启动完用tskill node杀死进程。8.2 依然想用 npm run dev 启动上面的hello world程序
办法是修改package.json文件,找到scripts下的”serve”: “vue-cli-service serve”,复制这一行到下一行将key(serve)改为dev即可自己可以对比一下,两个版本的package.json文件的差异,多尝试一下就了解了
-
vue服务端渲染——项目搭建、开发、生产环境的部署、浏览渲染、SEO优化
2020-01-06 14:30:46几个月前,公司要求(服务端渲染)——用vue-ssr做了个服务端渲染,从起搭建、开发、部署、浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习。——几个月过去了,公司又提出,...几个月前,公司要求(服务端渲染)——用vue-ssr做了个服务端渲染,从起搭建、开发、部署、浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习。——几个月过去了,公司又提出,不希望用vue,或是react或angular的ssr,希望用express + 引擎模板 做纯的html的服务端渲染,这个我下次分享,有兴趣的小伙伴可以一起交流学习。
一.前提(为什么使用vue-ssr)
- 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
- 更快的内容到达时间,特别是对于缓存的网络情况或运行缓慢的设备
二.使用服务端渲染的权衡 (应注意的情况)
- 开发条件所限。一些浏览器的特定代码,只能在某些生命周期钩子函数中使用(node环境只能使用vue的beforeCreate 与 created 生命周期),例如document的操作可以在mounted生命周期中操作;
- 涉及构建设置与部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同,服务端渲染应用程序,需要处于 node.js server 运行环境
- 更多的服务端负载。 在Node.js中渲染完整的应用程序,显然会比仅仅提供静态资源的 server 更加大量占用 CPU 资源,因此如果在高流量环境下使用,要准备相应的服务器负载,并采取缓存策略
三.使用vue-cli 2.0 修改配置 搭建 ssr 框架以及开发
1.首先用vue-cli2.0 搭建出你想要的命名项目 例如
vue init webpack vue-ssr-test
· webpack 配置
2.修改vue-loader.conf.js
将extract的值设置为false,因为服务器端渲染会自动将CSS内置。如果使用该extract,则会引入link标签载入CSS,从而导致相同的CSS资源重复加载
- extract: isProduction + extract: false
3.修改webpack.base.conf.js
只需修改entry入门配置即可
- app: './src/main.js' + app: './src/entry-client.js'
4.修改webpack.prod.conf.js
包括应用vue-server-renderer、去除HtmlWebpackPlugin、增加client环境变量
... + const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') ... new webpack.DefinePlugin({ 'process.env': env, + 'process.env.VUE_ENV': '"client"' }), ... - new HtmlWebpackPlugin({ - filename: config.build.index, - template: 'index.html', - inject: true, - minify: { - removeComments: true, - collapseWhitespace: true, - removeAttributeQuotes: true - // more options: - // https://github.com/kangax/html-minifier#options-quick-reference - }, - // necessary to consistently work with multiple chunks via CommonsChunkPlugin - chunksSortMode: 'dependency' - }), ... + new VueSSRClientPlugin() ...
5、新增 webpack.server.conf.js
const webpack = require('webpack') const merge = require('webpack-merge') const nodeExternals = require('webpack-node-externals') const baseConfig = require('./webpack.base.conf.js') const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') module.exports = merge(baseConfig, { entry: './src/entry-server.js', target: 'node', devtool: 'source-map', output: { libraryTarget: 'commonjs2' }, externals: nodeExternals({ whitelist: /\.css$/ }), plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), 'process.env.VUE_ENV': '"server"' }), new VueSSRServerPlugin() ] })
·入口配置
在浏览器端渲染中,入口文件是main.js,而到了服务器端渲染,除了基础的main.js,还需要配置entry-client.js和entry-server.js
6.修改main.js
import Vue from 'vue' import Vuex from 'vuex' - import '@/assets/style.css' //这里删除全局样式,然后直接写在app.vue组件内 import App from './App' - import router from './router' + import createRouter from './router' - import store from './store' + import createStore from './store' import async from './utils/async' Vue.use(async) - new Vue({ + export default function createApp() { + const router = createRouter() + const store = createStore() + const app = new Vue({ - el: '#app', router, store, - components: { App }, - template: '<App/>' + render: h => h(App) }) + return { app, router, store } +}
7.新增entry-client.js
后面会介绍到asyncData方法,但是asyncData方法只能用于路由绑定的组件,如果是初始数据则可以直接在entry-client.js中获取
import Vue from 'vue' import createApp from './main' Vue.mixin({ beforeRouteUpdate (to, from, next) { const { asyncData } = this.$options if (asyncData) { asyncData({ store: this.$store, route: to }).then(next).catch(next) } else { next() } } }) const { app, router, store } = createApp() /* 获得初始数据 */ import { LOAD_CATEGORIES_ASYNC } from '@/components/Category/module' import { LOAD_POSTS_ASYNC } from '@/components/Post/module' import { LOAD_LIKES_ASYNC } from '@/components/Like/module' import { LOAD_COMMENTS_ASYNC } from '@/components/Comment/module' import { LOAD_USERS_ASYNC } from '@/components/User/module' (function getInitialData() { const { postCount, categoryCount, userCount, likeCount, commentCount } = store.getters const { dispatch } = store // 获取类别信息 !categoryCount && dispatch(LOAD_CATEGORIES_ASYNC), // 获取文章信息 !postCount && dispatch(LOAD_POSTS_ASYNC), // 获取点赞信息 !likeCount && dispatch(LOAD_LIKES_ASYNC), // 获取评论信息 !commentCount && dispatch(LOAD_COMMENTS_ASYNC), // 获取用户信息 !userCount && dispatch(LOAD_USERS_ASYNC) })() if (window.__INITIAL_STATE__) { store.replaceState(window.__INITIAL_STATE__) } router.onReady(() => { router.beforeResolve((to, from, next) => { const matched = router.getMatchedComponents(to) const prevMatched = router.getMatchedComponents(from) let diffed = false const activated = matched.filter((c, i) => { return diffed || (diffed = (prevMatched[i] !== c)) }) if (!activated.length) { return next() } Promise.all(activated.map(c => { if (c.asyncData) { return c.asyncData({ store, route: to }) } })).then(() => { next() }).catch(next) }) app.$mount('#app') })
8.新增entry-sever.js
import createApp from './main' export default context => new Promise((resolve, reject) => { const { app, router, store } = createApp() router.push(context.url) router.onReady(() => { const matchedComponents = router.getMatchedComponents() if (!matchedComponents.length) { return reject({ code: 404 }) } Promise.all(matchedComponents.map(Component => { if (Component.asyncData) { return Component.asyncData({ store, route: router.currentRoute }) } })).then(() => { context.state = store.state resolve(app) }).catch(reject) }, reject) })
·修改组件
由于代码需要在服务器端和浏览器端共用,所以需要修改组件,使之在服务器端运行时不会报错
9.修改router路由文件
给每个请求一个新的路由router实例
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) + export default function createRouter() { - export default new Router({ + return new Router({ mode: 'history', routes: [ { path: '/', component: () => import(/* webpackChunkName:'home' */ '@/components/Home/Home'), name: 'home', meta: { index: 0 } }, ... ] }) +}
10.修改状态管理vuex文件
给每个请求一个新的vuex实例
import Vue from 'vue' import Vuex from 'vuex' import auth from '@/components/User/module' ... Vue.use(Vuex) + export default function createStore() { - export default new Vuex.Store({ + return new Vuex.Store({ modules: { auth, ... } }) +}
11.使用asyncData方法来获取异步数据
要特别注意的是,由于asyncData只能通过路由发生作用,使用是非路由组件的异步数据获取最好移动到路由组件中 如果要通过asyncData获取多个数据,可以使用Promise.all()方法
asyncData({ store }) { const { dispatch } = store return Promise.all([ dispatch(LOAD_CATEGORIES_ASYNC), dispatch(LOAD_POSTS_ASYNC) ]) }
如果该异步数据是全局通用的,可以在entry-client.js方法中直接获取
将TheHeader.vue通用头部组件获取异步数据的代码移动到entry-client.js方法中进行获取
// TheHeader.vue computed: { ... - ...mapGetters([ - 'postCount', - 'categoryCount', - 'likeCount', - 'commentCount', - 'userCount' - ]) }, - mounted() { // 获取异步信息 - this.loadAsync() ... - }, ... methods: { - loadAsync() { - const { postCount, categoryCount, userCount, likeCount, commentCount } = this - const { dispatch } = this.$store - // 获取类别信息 - !categoryCount && dispatch(LOAD_CATEGORIES_ASYNC) - // 获取文章信息 - !postCount && dispatch(LOAD_POSTS_ASYNC) - // 获取点赞信息 - !likeCount && dispatch(LOAD_LIKES_ASYNC) - // 获取评论信息 - !commentCount && dispatch(LOAD_COMMENTS_ASYNC) - // 获取用户信息 - !userCount && dispatch(LOAD_USERS_ASYNC) - },
将Post.vue中的异步数据通过asyncData进行获取
// post.vue ... export default { + asyncData({ store, route }) { + return store.dispatch(LOAD_POST_ASYNC, { id: route.params.postid }) + }, ... - mounted() { - this.$store.dispatch(LOAD_POST_ASYNC, { id: this.postId }) - }, ...
12.将全局css从main.js移动到App.vue中的内联style样式中,因为main.js中未设置css文件解析
// main.js - import '@/assets/style.css' // App.vue ... <style module lang="postcss"> ... </style>
13.由于post组件的模块module.js中需要对数据通过window.atob()方法进行base64解析,而nodeJS环境下无window对象,会报错。于是,代码修改如下
// components/Post/module - text: decodeURIComponent(escape(window.atob(doc.content))) + text: typeof window === 'object' ? decodeURIComponent(escape(window.atob(doc.content))) : ''
·服务器配置
14、在根目录下,新建server.js文件
由于在webpack中去掉了HTMLWebpackPlugin插件,而是通过nodejs来处理模板,同时也就缺少了该插件设置的HTML文件压缩功能
需要在server.js文件中安装html-minifier来实现HTML文件压缩
const express = require('express') const fs = require('fs') const path = require('path') const { createBundleRenderer } = require('vue-server-renderer') const { minify } = require('html-minifier') const app = express() const resolve = file => path.resolve(__dirname, file) const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), { runInNewContext: false, template: fs.readFileSync(resolve('./index.html'), 'utf-8'), clientManifest: require('./dist/vue-ssr-client-manifest.json'), basedir: resolve('./dist') }) app.use(express.static(path.join(__dirname, 'dist'))) app.get('*', (req, res) => { res.setHeader('Content-Type', 'text/html') const handleError = err => { if (err.url) { res.redirect(err.url) } else if (err.code === 404) { res.status(404).send('404 | Page Not Found') } else { res.status(500).send('500 | Internal Server Error') console.error(`error during render : ${req.url}`) console.error(err.stack) } } const context = { title: 'SSR-VUE-CLI', url: req.url } renderer.renderToString(context, (err, html) => { console.log(err) if (err) { return handleError(err) } res.send(minify(html, { collapseWhitespace: true, minifyCSS: true})) }) }) app.on('error', err => console.log(err)) app.listen(8989, () => { console.log(`vue ssr started at localhost: 8989`) })
15.修改package.json文件
- "build": "node build/build.js", + "build:client": "node build/build.js", + "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules", + "build": "rimraf dist && npm run build:client && npm run build:server",
16.修改index.html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link rel="shortcut icon" href="/static/favicon.ico"> <title>小火柴的蓝色理想</title> </head> <body> <!--vue-ssr-outlet--> //主要是这里 </body> </html>
17.取消代理
如果继续使用代理如/api代理到后端接口,则可能会报如下错误
error:connect ECONNREFUSED 127.0.0.1:80
直接写带有http的后端接口地址即可
const API_HOSTNAME = 'http://192.168.1.103:4000'
·测试
18.安装依赖包
npm install --save-dev vue-server-renderer express
19.构建
npm run build
20.运行
node server.js、
点击右键,查看网页源代码。结果如下,说明网站已经实现了服务器端渲染
四.部署生产环境
1.使用 pm2 对node程序进行守护
全局安装pm2 (其依赖node 和 npm, 可以自行研究 pm2 的使用)
npm install pm2 -g
由于该网站需要守护nodejs程序,使用pm2部署较为合适
在项目根目录下,新建一个ecosystem.json文件,内容如下
{ "apps" : [{ "name" : "vue-ssr-test", //项目名称 "script" : "./server.js", //启动服务的js脚本 "env": { //配置的环境 "COMMON_VARIABLE": "true" }, "env_production" : { //生产环境 "NODE_ENV": "production" } }], "deploy" : { //配置自动化的指令 "production" : { "user" : "xxx", // 购买的服务器的用户名 "host" : ["1.2.3.4"], // 服务器的ip地址 "port" : "22", // 服务器的端口号 "ref" : "origin/master", //代码管理的远程分支 "repo" : "git@github.com:littlematch0123/blog-client.git", //代码管理的远程仓库地址 "path" : "/home/xxx/www/mall", //在服务器中静态资源的存放路径 "post-deploy" : "source ~/.nvm/nvm.sh && cnpm install && pm2 startOrRestart ecosystem.json --env production", //自定义的启动自动化的指令 "ssh_options": "StrictHostKeyChecking=no", "env" : { "NODE_ENV": "production" //该自动指令的环境 } } } }
2.cdn、也就是说我们需要将我们的项目放到服务器里面去 (例如我这里)
首先在本地打包dist 【执行npm run build】
然后将所需要的文件或文件夹上传到服务器 【我这里用的是 FileZilla 软件】
dist 文件夹 server.js package.json index.template.html ecosystem.json
3、nginx 代理
如果要使用域名对项目进行访问,还需要进行nginx配置
通过以上步骤就可以将我们的项目部署到线上了
五: 浏览器渲染
官网的代码中,如果使用开发环境development,则需要进行相当复杂的配置
能否应用当前的webpack.dev.conf.js来进行开发呢?完全可以,开发环境中使用浏览器端渲染,生产环境中使用服务器端渲染需要做出如下三点更改:
1、更改API地址,开发环境使用webpack代理,生产环境使用上线地址
// src/constants/API let API_HOSTNAME if (process.env.NODE_ENV === 'production') { API_HOSTNAME = 'https://pc.zhumanyao.com' } else { API_HOSTNAME = '/api' }
2.在index.html同级目录下,新建一个index.template.html文件,index.html是开发环境的模板文件,index.template.html是生产环境的模板文件
// index.html <body> <div id="app"></div> </body> // index.template.html <body> <!--vue-ssr-outlet--> </body>
3、更改服务器端入口文件server.js的模板文件为index.template.html
// server.js const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), { runInNewContext: false, template: fs.readFileSync(resolve('./index.template.html'), 'utf-8'), clientManifest: require('./dist/vue-ssr-client-manifest.json'), basedir: resolve('./dist') })
经过简单的更改,即可实现开发环境使用浏览器端渲染,生产环境使用服务器端渲染的效果
六、SEO优化方案
1、图片格式
对于图片:(1)如果可以用精灵图的用精灵图——减少http请求;
(2)也可以将其转换成base64格式——这样他可以可js一起加载,同样减少http请求;
(3)再大点的图片,就可以利用浏览做缓存
2、服务端渲染的数据
服务端渲染的数据,我们要放在created 生命周期函数里面——保证源码可以看到
3、js的需求
对于页面对js的请求;在head部分中都是 preload 或 prefetch;他们的作用分别是高数浏览器 哪些是当前路由页面必须要用的js; 哪些是接下来页面要用,可以预加载(在浏览器空闲时加载)
4、路由的传参方式
这里最好是利用 /url/:id 方式,这样对seo友好;
5、页面首页的链接数
在首页最好是有外链,即:当首页最好有连接可以跳转到其他页面。(这里的连接是要直接嵌入在页面内,最好不用编程式。有利于SEO);但是当外链是跳出当前网站,在需要在连接上加el="nofollow" 属性;阻止爬虫去爬取,因为爬虫一旦爬出去,就不会再回来。 (为了seo优化,其他页面有连接也直接嵌入式的写入写页面)
6、多用语义化标签
这里我们多使用语义化标签 header、footer、section、h1~h6、article等,这样可以让爬虫直接抓取内容,对seo友好
7、设置TDK
每个页面都需要设置自己的tdk(title、description、keywords),这对seo优化起关键作用
8、符合XML标准
所有的单标签,都需要在尾部添加 '/';
等等,这里还有很多其他优化方案————(也用于其他部分)
七、动态设置TDK
在vue的服务端渲染中,如何动态设置tdk?
1、在src目下的建一个 /utils/head.js
// head.js function getHead (vm) { const { head } = vm.$options; if (head) { return typeof head === 'function' ? head.call(vm) : head; } } const serverHeadMixin = { created () { const head = getHead(this); if (head) { if (head.title) this.$ssrContext.title = `${head.title}`; if (head.keywords) this.$ssrContext.keywords = head.keywords; if (head.description) this.$ssrContext.description = head.description; } } }; const clientHeadMixin = { mounted () { const head = getHead(this); if (head) { if (head.title) document.title = `${head.title}`; if (head.keywords) document.querySelector('meta[name="keywords"]').setAttribute('content', head.keywords); if (head.description) document.querySelector('meta[name="description"]').setAttribute('content', head.description); } } }; export default process.env.VUE_ENV === 'server' ? serverHeadMixin : clientHeadMixin;
2、在server.js 里新增 //server.js
const context = { + title: '', url: req.url, + keywords: '', + description: '', }
3、在 index.template.html 里
//index.template.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <meta name='keywords' content='{{keywords}}'> + <meta name='description' content='{{description}}'> <link rel="shortcut icon" href="./static/logo-icon.png"> <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=ttvedgC1rj7yoVihmTA8LbVLMOg8WSwv"></script> + <title>{{title}}</title> </head> <body> <!--vue-ssr-outlet--> </body> </html>
4、在main.js 或 app.js 里面全局引入
// app.js + import headMixin from './utils/head'; + Vue.mixin(headMixin);
5、在组件汇总使用
// home.vue export default { name: 'home', data () { return { } }, + head () { + return { + 'title': '首页', + 'keywords': '关键词', + 'description': '描述' + } + }, ... }
6、动态设置tdk (即: 页面的内容是来势与后台,或根据id得到的)
// detail.vue 'detail/:id'
(1) 在utils下建tdk.js
// tdk.js const tdk = (url) => { if (url === 'goods_0000') { return fill('深迪科技企业级BOM管理', 'bom,主数据,配置,变更管理,生命周期,EBOM,MBOM', '面向未来智能制造以及大规模个性化定制业务,构建一个全面支持正向研发体系、致力提升内部核心能力和灵活应对外部环境变化的完整的BOM管理体系。') } else if (url === 'goods_0001') { return fill('深迪科技MES', 'MES,制造执行系统,追溯,看板,安灯,工单,上料防错', '深迪MES的优点是精确的JIT式拉动生产。适用于大批量小批次的离散加工。') } else if (url === 'case_000000') { return fill('深迪科技BOM管理系统案例', 'BOM,主数据,工艺,配置,变更管理,生命周期,EBOM,MBOM,整车物料管理', 'XBOM系统解决JAC工厂工艺与MBOM结合的问题,支撑工艺断点管理需求,可适应以后其他代工工厂同类问题;作为整车物料号管理的源头,完成了整车号生成规则管理、整车号管理以及与下游系统的集成。') } else if (url === 'case_000100') { return fill('深迪科技MES系统案例', 'MES,JIT,价值流,工单,车间计划,车间拉料,看板', '深迪与美的携手打造,它是深迪MES以价值链维度展开的应用,倍受好评与青睐。') } else if (url === 'case_000101') { return fill('深迪科技MES系统案例', 'MES,ERP集成,打通ERP,andon,系统集成,工业4.0,生产订单', '深迪与百年德企快可美携手打造,它是深迪MES在德系工业4.0中的实际应用。') } } function fill(title, keywords, description) { return {title: `${title}`, keywords: `${keywords}`, description: `${description}`} } export default tdk
(2) 在 detail.vue
//detail.vue <script> ... + import tdk from '@/utils/tdk' ... export default { name: 'detail', data () { return { ... + tdk: tdk(this.$route.params.id) } }, + head () { + return { + 'title': this.tdk.title, + 'keywords': this.tdk.keywords, + 'description': this.tdk.description + } + }, watch: { '$route'(to, from) { + this.tdk = tdk(this.$route.params.id) ... } }, ... methods: { ... } } </script>
-
springboot+vue部署到阿里云服务器(从零开始到部署完成,包含JDK的安装、Nginx做前端服务器以及Nginx配置...
2020-12-22 21:24:42项目部署起来还是很方便的只需要安装JDK(必须的环境,这个不用多说了吧)和Nginx的安装以及配置文件的配置。 1、安装JDK8 为了省时,我采用的懒人安装法,yum安装。 由于时间原因,就不多做赘述,百度一下一大堆。 ...由于最近这两天没有什么事情,经理让我把目前正在写的项目(半成品)部署到线上,由于本人还是菜鸟一枚,之前也没接触过,所以也是网上查资料从零开始部署。项目部署起来还是很方便的只需要安装JDK(必须的环境,这个不用多说了吧)和Nginx的安装以及配置文件的配置。
1、安装JDK8
为了省时,我采用的懒人安装法,yum安装。
由于时间原因,就不多做赘述,百度一下一大堆。2、Nginx安装
采用的weget方式直接下载压缩包,进行解压安装。
安装前需要先安装依赖。yum -y install pcre* yum -y install openssl*
在使用weget之前如果没有提示不是内部的命令,安装weget
yum install weget
然后创建一个跟目录,例如 /usr/local/nginxFile
然后使用weget下载下来(我是用的是1.16.1的版本),如下
weget http://nginx.org/download/nginx-1.16.1.tar.gz
然后解压缩
tar -zxvf Nginx压缩文件 如果提示tar不是内部的命令 yum install tar 安装
然后进入加压文件的根目录。
cd nginx-1.16.1
执行编译
./configure(这个是默认安装方式,由于时间原因,后续会给出指定用户以及依赖版本的安装方式)
如果编译失败说明没有编译环境,安装一下
yum -y install gcc make gcc-c++ openssl-devel wget
最后
make make install
接下来就是配置Nginx的配置文件
(这里博主遇到一个大坑,犯了一个低级错误,并不是说解压之后当前Nginx文件就是编译好的文件,其实编译好的在/usr/local/nginx文件夹下,就这一个小细节,导致我打包好的项目放错位置,然后还检查不出来问题,好几个小时都没解决,/(ㄒoㄒ)/~~)cd /usr/local/nginx/conf/ # 一般情况下我们都会把原始的配置文件复制一份保存,所以在配置前就先 cp nginx.conf nginx.conf.copy 接下来就可以 vim nginx.conf
配置文件的配置暂时不写,后面有时间写。
假设我们已经配置好,下面就是启动nginx
cd /usr/local/nginx/sbin #启动命令 ./nginx 查看是否启动成功 ps -ef | grep nginx # 停止命令 ./nginx -s stop # 重新加载配置文件命令 ./nginx -s reload
启动完成之后,由于是部署在阿里云上,需要把配置的端口开放了,这个由于时间原因,先不写了,就是开放安全组。
接下来开放后,浏览器输入
ip:端口
如果进入到了nginx界面,就代表Nginx安装完成。
3、前端打包部署到Nginx
打包
npm run bulid 如果不行看一下配置文件 也可能是 npm run bulid:prod
打包完成后会生成一个dist文件夹,压缩成压缩文件
上传到/usr/local/nginx/html下,解压缩dist压缩文件。然后再去配置文件中进行配置,注意此时根路径是 html/dist。然后进入到/usr/local/nginx/sbin./nginx -s reload
然后浏览器
ip:端口号
当进入项目入口界面时代表部署完成
4、后端部署
后端代码需要注意的是,由于是前后端分离部署,后端需要打成jar包,找到父级pom文件,如果时war,修改成jar。
有多种打包方式,我采取的时命令行打包# 跳过测试类进行打包 mvn clean package -Dmaven.test.skip = true
然后把jar包上传到linux。
随便创建一个文件夹作为根目录mkdir /usr/local/projec rz 选择咱们打包好的jar java -jar jar包
到这后端代码部署完成
如果想要在后台运行(关闭xshell工具或者窗口仍然在后台运行)
unhop java -jar jar包 &
此时没啥问题
就可以正常使用系统了。5、Nginx开机自启
由于时间原因 星期天找个时间写
-
vue环境的搭建
2018-11-10 22:53:00一、首先要安装nodejs : 别去官网下,慢的要死,这是国内的什么版本都有...其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_globa... -
只有src和web的项目怎么打包_VueCLI3.0干货系列之打包部署
2020-11-22 01:31:45VueCLI3.0的介绍以及安装使用在这里不再赘述,本篇文章主要探讨使用VueCLI3.0的项目怎么进行打包部署,需要做怎样的配置,以及部署到服务器上有什么问题,问题是如何解决的。VueCLI3.0之打包(build)VueCLI3.0的环境... -
Vue—Vue CLI
2020-02-18 14:24:47使用Vue CLI开发大型项目时,需要考虑代码目录结构、项目结构和部署、热加载、单元测试等,脚手架能够帮助我们完成这些事情。 使用vue-cli可以快速搭建Vue开发环境,以及对应的webpack配置 2、使用前提 Node环境... -
Vue进阶(一):创建第一个vue工程并安装需要的组件
2019-03-18 14:24:20什么是Vue-cli vue-cli是官方提供的一个脚手架,在创建Maven时创建一个骨架项目,这个骨架项目就是脚手架,用于快速创建一个vue的项目模板 主要功能 统一的目录结构 本地部署 热部署 单元测试 集成打包上线 准备... -
vue项目不同环境配置——同时打包和启动多套环境(手把手 包教包会)
2020-10-31 17:21:01测试环境、本地环境、正式环境、阶段性提交环境同时并存,是否已经厌烦了这种每次需要改代码的配置和地址方式? 先上效果图 第一套启动环境 第一套部署环境 第二套启动环境 第二套部署环境 ok,到现在,你应该... -
vue中基于node-scp2的自动化部署方案
2020-07-03 16:28:08基于node-scp2的自动化部署方案 背景 基于node-scp2的自动化部署方式 基于node-scp2方式的自动化部署,只需要在创建项目阶段配置好前...在windows上执行需要依托Node环境,最低版本为 v0.8.7。 自动化部署流程 第一步 -
vue-cli 3.0如何配置多种开发环境下的环境变量
2019-05-07 13:59:43为什么会需要配置多种环境变量 一个产品的开发过程中,一般来说都是会经历这么一个过程.本地发开--测试版本部署--测试--预上线--正式上线.对应的每一个环节中的服务器地址,接口地址...都会不一样。那么我们需要怎么去... -
springboot+vue 前后端分离项目怎么启动,怎么部署?附带maven教程
2020-07-25 15:02:28注:导入项目教程 0基础适用 1.node,js是什么? 如果说相当于java中的jdk 那就很清晰了,使js脱离浏览器 可以运行的环境,下载地址:... (需网上 下载maven 注意maven需要配置环境变量) 打开项目之后 -
Vue学习三(Vue脚手架)
2020-11-21 12:20:161.什么是Vue-cli 如果你只是写几个简单的Demo程序就不需要用到Vue cli 使用脚手架开发大型应用时,我们需要考虑代码结构、项目结构和部署、热加载、代码单元测试等事情 使用脚手架工具来配置 使用vue cli可以快速... -
7、Vue:第一个vue-cli项目
2020-09-01 19:57:36文章目录7.1、什么是vue-cli7.2、需要的环境 7.1、什么是vue-cli vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板; 预先定义好的目录结构即基础代码,就好比咱们在创建Maven项目时可以选择创建一个... -
vue-cli (Vue.js快速开发)
2020-09-23 09:34:19九、第一个vue-cli项目 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 1. 什么是vue-cli vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板...2. 需要的环境 Node.js : http://nodejs.cn/download/ -
vue-cli
2021-02-27 22:41:09一、什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发... -
Vue之第一个vue-cli项目
2020-10-08 10:44:061、什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加... -
vue学习笔记之Vue CLI(安装与认识)
2019-09-26 13:50:19使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些... -
Vue-cli
2021-01-15 19:16:38什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板; 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的... -
vue-cli项目、Webpack的使用、vue-router路由
2020-12-11 18:50:18文章目录第一个vue-cli项目 第一个vue-cli项目 什么是vue-cli vue-cli是官方提供的一个脚手架,用于快速生成一个vue的项目模板; ...需要的环境 Node.js: Node.js:http://nodejs.cn/download/ -
// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2 UEDITOR_HOME_URL: '/static/...
-
八、VUE CLI
2020-11-24 13:53:52使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些... -
Vue笔记——第一个vue-cli项目(狂神)
2020-07-21 12:24:541、什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加... -
Vue——11,第一个vue-cli项目(狂神系列)
2021-02-21 10:45:091、什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板; 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的... -
Vue学习笔记07-----第一个vue-cli项目
2020-08-03 00:27:061、什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板; 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们... -
Springboot项目与vue项目整合打包
2019-05-09 11:01:141.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等。因此在这种情况下尽量减少部署时的服务... -
vue-webpack 做出来的项目部署到服务器上,点开是空白页(我这里把项目发布到git上)...
2017-09-22 18:17:00总结2:npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外)。意思... -
VueCLI 脚手架安装与使用
2020-11-22 12:22:34使用 vue 开发大型项目时,我们需要考虑代码目录结构。项目结构和部署,热加载、代码单元测试等事情。 通常我们会使用一些脚手架工具来提高开发效率。 (二)CLI 是什么 CLI 是 Command-Line Interface 的简写,...
-
中国人民大学在国内十大名校中名列前茅,中外合作办学硕士项目也是NO.1
-
北京航空航天-大学精读文言文翻译.pdf
-
anaconda使用
-
电缆.rar 电气设备选型资料大全 (适合刚刚入行的电气工程师对设备进行选型规划)详解
-
南京航天航空大学《数学分析》2002-2013年历年研究生入学考试试卷(含答案).pdf
-
零基础一小时极简以太坊智能合约开发环境搭建并开发部署
-
中国计算机视觉人才调研报告2020年.pdf
-
2021-03-01
-
SEW电气设备选型资料大全
-
k8s安装kubesphere错误:unable to retrieve the complete list of server APIs: metrics.k8s.io/v1beta1: the s
-
5、less4-基于报错的双引号字符型注入
-
北京航天航空学校《高等数学》历年期末考试试卷(含答案).pdf
-
华中师范大学《中国古代文学史》历年期末试卷及参考答案.pdf
-
关于 timeout 和 坚持
-
华东师范大学-数学分析-历年真题(1997年-2006年).pdf
-
2014年界首市高级职业中学《计算机基础》期末试卷.pdf
-
leetcode-231
-
南京理工大学《高等代数》08-12年历年考研试题.pdf
-
机柜.电气设备选型资料大全 (适合刚刚入行的电气工程师对设备进行选型规划)详解
-
基于SSM实现的房屋租赁系统【附源码】(毕设)