vlambda博客
学习文章列表

<button @click="sayHi">如果不进行激活，点我是不会触发事件的</button>

const path = require('path')const { VueLoaderPlugin } = require('vue-loader')const isProd = process.env.NODE_ENV === 'production'
function resolve(dir) { return path.join(__dirname, '..', dir)}
module.exports = { context: path.resolve(__dirname, '../'), devtool: isProd ? 'source-map' : '#cheap-module-source-map', output: { path: path.resolve(__dirname, '../dist'), publicPath: '/dist/', // chunkhash 同属一个 chunk 中的文件修改了，文件名会发生变化  // contenthash 只有文件自己的内容变化了，文件名才会变化 filename: '[name].[contenthash].js', // 此选项给打包后的非入口js文件命名，与 SplitChunksPlugin 配合使用 chunkFilename: '[name].[contenthash].js', }, resolve: { extensions: ['.js', '.vue', '.json', '.css'], alias: { public: resolve('public'), '@': resolve('src') } }, module: { // https://juejin.im/post/6844903689103081485 // 使用 `mini-css-extract-plugin` 插件打包的的 `server bundle` 会使用到 document。 // 由于 node 环境中不存在 document 对象，所以报错。 // 解决方案：样式相关的 loader 不要放在 `webpack.base.config.js` 文件 // 将其分拆到 `webpack.client.config.js` 和 `webpack.client.server.js` 文件 // 其中 `mini-css-extract-plugin` 插件要放在 `webpack.client.config.js` 文件配置。 rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { compilerOptions: { preserveWhitespace: false } } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|svg|jpg|gif|ico)$/, use: ['file-loader'] }, { test: /\.(woff|eot|ttf)\??.*$/, loader: 'url-loader?name=fonts/[name].[md5:hash:hex:7].[ext]' }, ] }, plugins: [new VueLoaderPlugin()],}

const webpack = require('webpack')const merge = require('webpack-merge')const base = require('./webpack.base.config')const CompressionPlugin = require('compression-webpack-plugin')const WebpackBar = require('webpackbar')const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
const plugins = [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify( process.env.NODE_ENV || 'development' ), 'process.env.VUE_ENV': '"client"' }), new VueSSRClientPlugin(), new MiniCssExtractPlugin({ filename: 'style.css' })]
if (isProd) { plugins.push( // 开启 gzip 压缩 https://github.com/woai3c/node-blog/blob/master/doc/optimize.md new CompressionPlugin(), // 该插件会根据模块的相对路径生成一个四位数的hash作为模块id, 用于生产环境。 new webpack.HashedModuleIdsPlugin(), new WebpackBar(), )}
const config = { entry: { app: './src/entry-client.js' }, plugins, optimization: { runtimeChunk: { name: 'manifest' }, splitChunks: { cacheGroups: { vendor: { name: 'chunk-vendors', test: /[\\/]node_modules[\\/]/, priority: -10, chunks: 'initial', }, common: { name: 'chunk-common', minChunks: 2, priority: -20, chunks: 'initial', reuseExistingChunk: true } }, } }, module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { // 解决 export 'default' (imported as 'mod') was not found // 启用 CommonJS 语法 esModule: false, }, }, 'css-loader' ] } ] },}
if (isProd) { // 压缩 css config.optimization.minimizer = [ new CssMinimizerPlugin(), ]}
module.exports = merge(base, config)

const webpack = require('webpack')const merge = require('webpack-merge')const base = require('./webpack.base.config')const nodeExternals = require('webpack-node-externals') // Webpack allows you to define externals - modules that should not be bundled.const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')const WebpackBar = require('webpackbar')
const plugins = [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), 'process.env.VUE_ENV': '"server"' }), new VueSSRServerPlugin()]
if (process.env.NODE_ENV == 'production') { plugins.push( new WebpackBar() )}
module.exports = merge(base, { target: 'node', devtool: '#source-map', entry: './src/entry-server.js', output: { filename: 'server-bundle.js', libraryTarget: 'commonjs2' }, externals: nodeExternals({ allowlist: /\.css$/ // 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖 }), plugins, module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] },})

const fs = require('fs')const path = require('path')const express = require('express')const setApi = require('./api')const LRU = require('lru-cache') // 缓存const { createBundleRenderer } = require('vue-server-renderer')const favicon = require('serve-favicon')const resolve = file => path.resolve(__dirname, file)
const app = express()// 开启 gzip 压缩 https://github.com/woai3c/node-blog/blob/master/doc/optimize.mdconst compression = require('compression')app.use(compression())// 设置 faviconapp.use(favicon(resolve('../public/favicon.ico')))
// 新版本 需要加 new，旧版本不用const microCache = new LRU({ max: 100, maxAge: 60 * 60 * 24 * 1000 // 重要提示：缓存资源将在 1 天后过期。})
const serve = (path) => { return express.static(resolve(path), { maxAge: 1000 * 60 * 60 * 24 * 30 })}
app.use('/dist', serve('../dist', true))
function createRenderer(bundle, options) { return createBundleRenderer( bundle, Object.assign(options, { basedir: resolve('../dist'), runInNewContext: false }) )}
function render(req, res) { const hit = microCache.get(req.url) if (hit) { console.log('Response from cache') return res.end(hit) }
 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.log(err) } }
 const context = { title: 'SSR 测试', // default title url: req.url }
 renderer.renderToString(context, (err, html) => { if (err) { return handleError(err) }
 microCache.set(req.url, html) res.send(html) })}
const templatePath = resolve('../public/index.template.html')const template = fs.readFileSync(templatePath, 'utf-8')const bundle = require('../dist/vue-ssr-server-bundle.json')const clientManifest = require('../dist/vue-ssr-client-manifest.json') // 将js文件注入到页面中const renderer = createRenderer(bundle, { template, clientManifest})
const port = 8080
app.listen(port, () => { console.log(`server started at localhost:${ port }`)})
setApi(app)
app.get('*', render)

app.get('/fetchData', (req, res) => { ... })app.post('/changeData', (req, res) => { ... })app.get('*', render)

// dev-server.jsconst express = require('express')const webpack = require('webpack')const webpackConfig = require('../build/webpack.dev') // 获取 webpack 配置文件const compiler = webpack(webpackConfig)const app = express()
app.use(require('webpack-hot-middleware')(compiler))app.use(require('webpack-dev-middleware')(compiler, { noInfo: true, stats: { colors: true }}))

// webpack.dev.jsconst merge = require('webpack-merge')const webpackBaseConfig = require('./webpack.base.config.js') // 这个配置和热更新无关，可忽略
module.exports = merge(webpackBaseConfig, { mode: 'development', entry: { app: ['webpack-hot-middleware/client?reload=true' , './client/main.js'] // 开启热模块更新 }, plugins: [new webpack.HotModuleReplacementPlugin()]})

// 在 app.js 文件添加上这段代码，对环境进行判断if (typeof window === 'undefined') { global.window = {}}

module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { compilerOptions: { preserveWhitespace: false } } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|svg|jpg|gif|ico)$/, use: ['file-loader'] }, { test: /\.(woff|eot|ttf)\??.*$/, loader: 'url-loader?name=fonts/[name].[md5:hash:hex:7].[ext]' }, ]}

module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { // 解决 export 'default' (imported as 'mod') was not found esModule: false, }, }, 'css-loader' ] } ]}

module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ]}

"dev": "rimraf dist && node ./server/dev-server.js --mode development",

<script>// 原来报错的操作，这个接口有 DOM 操作，所以这样使用的时候在服务端会报错。import { fetchArticles } from '@/api/client'
export default { methods: { getAppointArticles() { fetchArticles({ tags: this.tags, pageSize: this.pageSize, pageIndex: this.pageIndex, }) .then(res => { this.$store.commit('setArticles', res) }) }, }}</script>

<script>// 先定义一个外部变量，在 mounted() 钩子里赋值let fetchArticlesexport default { mounted() { // 由于服务端渲染不会有 mounted() 钩子，所以在这里可以保证是在客户端的情况下引入接口 fetchArticles = require('@/api/client').fetchArticles }, methods: { getAppointArticles() { fetchArticles({ tags: this.tags, pageSize: this.pageSize, pageIndex: this.pageIndex, }) .then(res => { this.$store.commit('setArticles', res) }) }, }}</script>